Implementation of SingleSelect with filter function

[anicyne]

Refs: #3694

[github-actions[bot]]

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

[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? 1) 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!