Implementation of SingleSelect with filter function

[anicyne]

Refs: #3694

[github-actions]

Netlify Draft Deployment
URL: https://66b0d5a19e097ef067ed7b8d--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/sites/kolibri-public-ui/deploys/66b0d5a19e097ef067ed7b8d

[sdvg]

Ich habe zunächst mal getestet und mir sind noch folgende Punkte aufgefallen:

1. Wenn ich mit den Pfeiltasten durch die letzten 2-3 Optionen navigiere, scrollt die gesamte Seite mit.
2. Wenn der Pfeil-Button fokussiert ist, kann ich ihn nur mit der Leertaste, aber nicht mit Enter betätigen. Ist das gewollt?
3. Ich kann die fokussierte Option nicht mit der Maus verschieben. Es kann praktisch zwei fokussierte Elemente gleichzeitig geben (eins mit Tastatur und eins mit Maus ausgewählt). Ein natives <select> verhält sich hier anders.

2. Man kann die Komponente auch fokussieren, wenn sie eigentlich deaktiviert ist. Entweder durch Tabben oder wenn man auf den Pfeil klickt:

5. Sollten wir eine Meldung anzeigen, wenn es keine Suchergebnisse gibt? Aktuell wird die Liste einfach ausgeblendet und man könnte denken, es handelt sich um eine Combobox, die freie Eingaben erlaubt (Wert wird erst gelöscht, wenn ich auf eine andere Stelle der Seite klicke? Das sollte vermutlich auch auf blur funktionieren).

6. Bei einem Text-Eingabefeld kann man normalerweise auf den Text doppelklicken, wodurch dieser markiert wird. Versucht man das bei dieser Komponente, öffnen und schließen sich die Optionen und der Fokus geht verloren.

7. Bei einem Klick auf das X geht der Fokus verloren.

8. Im Default-Theme sind die Radio-Buttons als solche erkennbar. Wurde das irgendwo definiert oder besprochen? Kommt mir erst mal falsch vor.

[sdvg]

Neuer Test:

1. Ich bekomme nicht immer Vorschläge angezeigt, wenn ich etwas eintippe:

2. Wenn ich bereits etwas eingetippt habe und dann den Pfeil klicke, wird meine Auswahl gelöscht.

3. Die Radio-Buttons sind jetzt ausgeblendet, nehmen aber noch Platz ein:

4. Wenn der Pfeil-Button fokussiert ist, kann ich ihn nur mit der Leertaste, aber nicht mit Enter betätigen. Ist das gewollt?

Das ist weiterhin so. Auf <Enter> wird jetzt das Eingabefeld fokussiert.

5. Bei der deaktivierten Komponente kann ich weiterhin den X-Button klicken und den Tooltip für den Pfeil aktivieren:

6. "Sollten wir eine Meldung anzeigen, wenn es keine Suchergebnisse gibt? Aktuell wird die Liste einfach ausgeblendet und man könnte denken, es handelt sich um eine Combobox, die freie Eingaben erlaubt (Wert wird erst gelöscht, wenn ich auf eine andere Stelle der Seite klicke? Das sollte vermutlich auch auf blur funktionieren)."

Dieser Punkt ist noch offen.

---

Die übrigen Punkte sind erledigt, danke!

[sdvg]

Steht vermutlich nicht im Ticket, aber wir sollten neue Inputs immer auch in den entsprechenden Szenarien ergänzen:

• inputs-get-value
• static-form
• focus-elements

[sdvg]

Könntest du die Events anhand der Szenarien bitte einmal durchtesten und korrigieren:

• bei onInput bekomme ich numbers statt der Werte.
• ich sehe teilweise Exceptions.
• bei meinem letzten Test bekam ich false als Wert.

Falls du die Fehler nicht reproduzieren kannst geb gerne noch mal Bescheid, dann dokumentiere ich die Schritte genauer!

[sdvg]

static-form konnte ich nicht testen, weil das SingleSelect hier keine Auswahlmöglichkeiten hat.

[sdvg]

Es gibt noch ein Problem mit dem Fokus-Verschieben mit der Maus. Zum Reproduzieren:

1. Optionen öffnen
2. Mit der Maus über die erste Option fahren (nicht klicken)
3. Pfeiltaste nach oben drücken

Soll: Die letzte Option in der Liste ist fokussiert.
Ist: Die Option, die jetzt unter dem Cursor liegt, ist fokussiert.

[sdvg]

Mit getValue stimmt noch etwas nicht: Wenn ich den Wert mit einem Klick auf "X" lösche, bekomme ich immer noch den vorherigen Wert:

✅ Erledigt

[deleonio]

Wenn ich in das Feld klicke, dann verliert das Eingabefeld den Fokus wieder. Das Problem hatten wir auch schon bei der Combobox, wo es gelöst ist.