Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Mit der Dropdown-Komponente wird eine Reihe von Optionen angezeigt, aus denen Benutzer eine Option auswählen können. In Dropdowns werden Optionen schrittweise angezeigt, sodass Benutzer nicht zu viele Informationen gleichzeitig sehen. Sie können auch zum Gruppieren von Informationen verwendet werden. Dropdowns werden immer durch eine Feldbeschriftung oder einen Titel ergänzt, die vor dem Steuerelement positioniert sind.
Diese Komponente gibt es in vier Varianten: Auswahl, Mehrfachauswahl, Kombinationsfeld und Mehrfach-Kombinationsfeld.
Mit der Variante Mehrfach-Kombinationsfeld der Dropdown-Komponente können Benutzer längere Listen so filtern, dass nur die Optionen angezeigt werden, die einer Suchanfrage entsprechen. Der Benutzer kann mehrere Optionen in der Liste auswählen.
Wenn die Auswahlliste für ein Kombinationsfeld nicht komplex genug ist, können Sie die Dropdown-Variante Mehrfachauswahl verwenden.
Es gibt eine kleine Anzahl von Optionen (5 oder weniger), aus denen Benutzer wählen können. Verwenden Sie Kontrollkästchen für Mehrfachauswahlelemente.
Aufbau der Dropdown-Komponente, Variante Mehrfach-Kombinationsfeld.
Beschriftung: Beschreibt den Zweck des Eingabefelds.
Hilfetext (optional): Liefert zusätzlichen Kontext oder hilft dem Benutzer bei der richtigen Auswahl.
Dropdown-Eingabe: Zeigt die vom Benutzer ausgewählten Optionen an. Benutzer können in das Eingabefeld schreiben, um eine Option zu finden, die ihrer Abfrage entspricht.
Dropdown-Menü: Zeigt eine Liste mit Optionen zur Auswahl an.
Jutro unterstützt Dropdown-Menüs mit Eingabefeldern mit Autovervollständigung. Benutzer können manuell Text eingeben, um die Dropdown-Elemente zu filtern. Diese Funktion ist hilfreich, um Benutzern die Auswahl aus einer langen Liste zu erleichtern.
In Dropdown-Menüs mit aktivierter Autovervollständigung werden Einträge vorgeschlagen, wenn Benutzer mit der Eingabe beginnen. Die Auswahl wird basierend auf den eingegebenen Zeichen angezeigt. Je mehr Zeichen der Benutzer im Feld eingibt, desto detaillierter wird die Liste.
Wenn Sie das Dropdown-Menü zum Sortieren verwenden, sollten Sie die Optionen in einer entsprechenden Reihenfolge anordnen. Beispiel:
Von der häufigsten zu der am wenigsten häufigen Option
Von der einfachsten zur komplexesten Option
Von der am wenigsten riskanten zur riskantesten Option
Die erste Option wird oben in der Liste angezeigt.
Ordnen Sie die Liste der Optionen nicht alphabetisch an, es sei denn, dies ist für Ihren Anwendungsfall sinnvoll. Listen mit Ländern und anderen Problemen mit bekannten Elementen lassen sich oft problemlos alphabetisch ordnen. Sie müssen jedoch sicher sein, dass die Benutzer den Namen ihrer Auswahl eindeutig kennen.
Positionieren Sie die Dropdown-Beschriftung außerhalb des Felds, sodass sie immer sichtbar ist. Auf ein Dropdown-Menü ohne Beschriftung kann nicht zugegriffen werden.
Ersetzen Sie Feldbeschriftungen nicht durch Platzhaltertext im Feld. Das beeinträchtigt die Gebrauchstauglichkeit und hat viele negative Folgen.
Positionieren Sie eine dauerhafte Beschriftung außerhalb des Felds.
Verwenden Sie keinen Platzhaltertext als Ersatz für die Beschriftung.
Verwenden Sie Hilfetext, um Kontext bereitzustellen und zu vermitteln, was ausgewählt oder wie eine Option ausgewählt werden soll. Hier einige Beispiele dafür, welche Informationen Sie im Hilfetext angeben können:
Eine allgemeine Beschreibung der Dropdown-Optionen
Hinweise, die den Benutzer bei der richtigen Auswahl unterstützen
Mehr Kontext dazu, warum ein Benutzer eine Auswahl treffen muss
Verwenden Sie Hilfetext nur für relevante Informationen. Vermeiden Sie Hilfetexte, die lediglich dieselben Informationen wiedergeben, die bereits in der Beschriftung stehen.
Verwenden Sie für Hilfetext die übliche Groß- und Kleinschreibung. Schreiben Sie 1 bis 2 kurze, vollständige Sätze, die mit einem Punkt enden.
Verwenden Sie Hilfetext, um Informationen zum Kontext zu geben.
Wiederholen Sie im Hilfetext nicht einfach die Informationen, die bereits in der Beschriftung stehen.
Fügen Sie keinen Platzhaltertext in das Texteingabefeld ein. Platzhaltertext belastet das Kurzzeitgedächtnis der Benutzer, da er nach der Eingabe eines Werts verschwindet. Auch für Benutzer mit vermindertem Sehvermögen und kognitiven Beeinträchtigungen stellt er eine zusätzliche Belastung dar.
Platzieren Sie Hinweise und Anweisungen stattdessen außerhalb des Felds.
Für das Eingabefeld des Mehrfach-Kombinationsfelds gelten die Inhaltsrichtlinien für Textfelder.
Der Text der Fehlermeldung erklärt dem Benutzer, wie er den Fehler beheben kann. Bei Dropdown-Menüs hängen Fehler oft mit etwas zusammen, das für die Inline-Validierung korrigiert werden muss. Wenn beispielsweise kein Risikofaktor ausgewählt ist und es sich dabei um ein Pflichtfeld handelt, können Sie dem Benutzer mithilfe eines Fehlertexts eine Lösung aufzeigen: „Wählen Sie einen oder mehrere Risikofaktoren aus.“
Verwenden Sie für Fehlertext die übliche Groß- und Kleinschreibung. Schreiben Sie 1 bis 2 kurze, vollständige Sätze, die mit einem Punkt enden.
Verwenden Sie Fehlermeldungstexte, um den Benutzer anzuleiten und ihm eine Lösung aufzuzeigen.
Schreiben Sie keine zweideutigen Fehlermeldungen und lassen Sie die Benutzer nicht im Unklaren darüber, wie ein Problem zu lösen ist.
Markieren Sie erforderliche Felder mit einem Sternchen (*). Das Sternchen steht vor der Feldbeschriftung. Benutzer können so leicht herausfinden, welche Felder erforderlich sind, indem sie nur das Zeichen ganz links in der Beschriftung prüfen.
Zusätzlich zur Markierung erforderlicher Felder mit einem Sternchen wird empfohlen, klare Anweisungen am oberen Rand des Formulars einzufügen, z. B. „Alle mit einem Sternchen gekennzeichneten Felder sind Pflichtfelder“, um sicherzustellen, dass die Benutzer die Bedeutung des Sternchens verstehen.
Verwenden Sie ein Sternchen, um anzuzeigen, dass ein Feld ein Pflichtfeld ist.
Verwenden Sie kein Sternchen, um optionale Elemente zu kennzeichnen.
Die Variante Mehrfach-Kombinationsfeld wird ohne Wert (Standard), mit Platzhaltertext oder mit vorausgefüllter Eingabe angezeigt.
Visualisierung
Zustand
Beschreibung
Kein Wert (Standard)
Zeigt dem Benutzer an, dass kein Wert ausgewählt wurde und kein Platzhalter vorhanden ist.
Platzhalter
Zeigt dem Benutzer an, dass kein Wert ausgewählt wurde. Der Platzhalter ist ausgegraut.
Vorausgefüllte Eingabe
Gibt für den Benutzer an, dass die Eingabe mit Daten vorausgefüllt ist.
Das Mehrfach-Kombinationsfeld verfügt auch über interaktive Zustände für Aktiviert, Fokus, Deaktiviert, Fehler, Schreibgeschützt und Nur Anzeige.
Zustand
Beschreibung
Aktiviert
Zeigt dem Benutzer an, dass das Element für die Interaktion aktiviert ist.
Fokussiert
Zeigt dem Benutzer an, auf welchem UI-Element im System der Fokus liegt.
Deaktiviert
Zeigt dem Benutzer an, dass der Eingabewert aufgrund lokaler Faktoren nicht geändert werden kann. Zum Beispiel muss ein Kontrollkästchen über dem Eingabefeld aktiviert sein, um auf dieses Eingabefeld zuzugreifen. Der Benutzer kann durch Interaktion mit der Seite eine Aktion zur Aktivierung durchführen.
Fehler
Zeigt an, dass der Benutzer einen Fehler bei der Validierung gemacht hat. Der Fehlertext gibt dem Benutzer eine korrigierende Rückmeldung.
Schreibgeschützt
Zeigt dem Benutzer an, dass der Eingabewert aufgrund externer Faktoren nicht geändert werden kann. Beispiel: fehlender Schreibzugriff. Der Benutzer kann Maßnahmen zur Aktivierung ergreifen, indem er sich z. B. an einen Administrator wendet.
Nur Anzeige
Der Zustand „Nur Anzeige“ wird in zwei Fällen verwendet:
Ein UI-Element wird im Anzeigemodus verwendet.
Ein UI-Element wird im Bearbeitungsmodus angezeigt, ist aber nie bearbeitbar.
Dieser Zustand wurde zuvor als „Schreibgeschützt“ bezeichnet.
Die folgende Abbildung veranschaulicht die interaktiven Zustände des Mehrfach-Kombinationsfelds.
Das Dropdown-Menü wird mit der Leertaste erweitert und reduziert. Benutzer navigieren mit den Pfeiltasten durch die Optionen und wählen mit der Leertaste oder der Eingabetaste eine Option aus.
aria-labelledby stellt eine programmgesteuerte Verknüpfung zwischen dem Eingabefeld und seiner Beschriftung her. Das WAI-ARIA-Attribut aria-autocomplete='list' gibt an, dass eine Auswahlliste angezeigt wird, aus der der Benutzer eine Option auswählen kann, das Bearbeitungsfeld jedoch den Fokus behält. Wenn in Storybook die Option „required“ ausgewählt wird, werden die Attribute „required“ und „aria-required="true"“ zum Eingabefeld hinzugefügt.
Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.
Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.
Bei Verwendung dieser Komponente in Ihren Anwendungen:
Erleichtern Sie den Benutzern das Verständnis der Inhalte und verwenden Sie keine zu langen Bezeichnungen für Optionen.
Verwenden Sie keine implizit fokussierbaren Elemente wie Schaltflächen, Kontrollkästchen und Links und keine implizit semantischen Inhalte wie Überschriften in Dropdown-Komponenten.
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.
Warning: An die Komponente MultipleSelect können keine anderen untergeordneten Optionen als SelectOption übergeben werden. Auch wenn dies funktionieren kann, kann es zu unerwartetem Verhalten führen oder durch in künftigen Versionen eingeführte Änderungen beeinträchtigt werden.
If set to true, adds an icon button that appears when at least one option is selected, or any text is typed. It allows the user to unselect all selected options and delete the typed text at once.
If set to true, the tags are displayed permanently in expanded view. This overrides the default behavior where excess tags collapse into a tag containing aggregated options.
Value of the component, in the form of an array of currently selected options. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Der Hook useFilteredOptions enthält die Mechanismen zur Verarbeitung der Optionen, die basierend auf Benutzereingaben angezeigt werden.
Übergebene Parameter:
initialOptions: TValue[]: Anfängliche Liste der Optionen in der Komponente ohne angewendete Filter
Ausgabe:
Ein Objekt mit Folgendem:
filteredOptions: TValue[]: Array mit den Optionen, die sich aus der Anwendung eines Filters ergeben
onSearch: function: Funktion, die das Eingabeereignis onSearch verwendet und die Optionen entsprechend filtert. Kann dem Ereignis onSearch der Komponente zugewiesen werden.
resetFilter: function: Wird verwendet, um die Filterung der Optionen zurückzusetzen. Dabei wird das filteredOptions-Array auf seinen Initialwert festgelegt.
Wenn die Tags der ausgewählten Optionen den Komponentenbereich überschreiten, werden einige in einem einzelnen Tag zusammengeführt, das die Anzahl der nicht angezeigten ausgewählten Optionen angibt. Durch Klicken auf dieses Tag wird die Komponente vertikal erweitert, sodass alle Tags der ausgewählten Optionen angezeigt werden. Nachdem die Options-Tags erweitert wurden, können sie nicht mehr ausgeblendet werden.
Um dieses Verhalten zu überschreiben und alle Options-Tags dauerhaft in einer erweiterten Ansicht anzuzeigen, legen Sie die Eigenschaft tagsAlwaysExpanded auf true fest. Zum Vergleich der beiden Verhalten siehe diese Beispiele.
Alle Dropdown-bezogenen Komponenten definieren die Liste der verfügbaren Optionen über die Eigenschaft children des Typs ReactNode. Sie können nur die folgenden Unterkomponenten als untergeordnete Komponenten verwenden:
SelectOption verwendet in Select und MultipleSelect
ComboboxOption verwendet in Combobox und MultipleCombobox
Warning:
SelectOption und ComboboxOption dürfen nur im Kontext ihrer jeweiligen „übergeordneten“ Komponente verwendet werden. Obwohl sie möglicherweise allein verwendet werden können, wird dies nicht unterstützt.
Bei den Komponenten Select und MultipleSelect ist nur vorgesehen, dass SelectOption-Komponenten als untergeordnete Komponenten unterstützt werden. Auch wenn sie möglicherweise andere Typen oder HTML-Elemente anzeigen oder verarbeiten können, wird dies nicht unterstützt.
Bei den Komponenten Combobox und MultipleCombobox ist nur vorgesehen, dass ComboboxOption-Komponenten als untergeordnete Komponenten unterstützt werden. Auch wenn sie möglicherweise andere Typen oder HTML-Elemente anzeigen oder verarbeiten können, wird dies nicht unterstützt.
Jegliche Verwendung dieser Komponenten außerhalb des unterstützten Geltungsbereichs fällt nicht unter die Verpflichtung der Non-Breaking Changes, da eine solche Verwendung nicht als Bestandteil des Komponentenvertrags gilt. Diese Verwendungen können zu unerwartetem Verhalten führen oder durch in künftigen Versionen eingeführte Änderungen beeinträchtigt werden.
Die Jutro-Eingaben haben imperative Handler als Mechanismus implementiert, um Zugang zu einigen gängigen nativen Funktionen zu bieten, die für Sie nützlich sein könnten. Die folgenden Funktionen sind verfügbar:
Fokus setzen ermöglicht es, den Fokus des Benutzers auf eine bestimmte Komponente zu setzen.
Fokus aufheben ermöglicht es, den Fokus von der Komponente zu entfernen.
Zur Komponente scrollen ermöglicht es, den Benutzer zu einem bestimmten Bereich der Seite zu führen.
Diese Funktionen werden über die ref-Eigenschaft bereitgestellt, die sie wie folgt verfügbar macht:
Obwohl einige Jutro-Komponenten ergänzende Funktionen oder eine Hilfsfunktion zur Erleichterung des Validierungsprozesses bereitstellen, liegt es in Ihrer Verantwortung als Entwickler, die Validierung von Benutzereingaben (mit oder ohne Verwendung der ergänzenden Hilfsfunktionen) durchzuführen und zu entscheiden, welche Fehlermeldungen angezeigt werden sollen.
Das Verhalten von Jutro-Komponenten hängt von der Implementierung durch den Entwickler ab.
Wann werden Fehlermeldungen angezeigt?
Fehlermeldungen werden nur angezeigt, wenn Sie sie über die Eigenschaft stateMessages an die Komponente übergeben. Diese Eigenschaft empfängt ein Objekt mit dem folgenden Inhalt:
Die Komponente zeigt alle bereitgestellten Fehlermeldungen in der gleichen Reihenfolge wie im Array an.
Wann erfolgt die Validierung?
Dies ist Ihre Entscheidung als Entwickler. Da die Komponenten nicht festlegen, wann die Validierung durchgeführt wird oder wann der Fehler angezeigt werden muss, müssen Sie die Logik für die Behandlung entsprechend den Projektanforderungen implementieren, z. B. während der Benutzer den Inhalt bearbeitet, wenn die Komponente den Fokus verliert und bei der Formularübermittlung.
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.
Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie MultipleCombobox verwenden können. Auf den spezifischen Registerkarten finden Sie Einzelheiten zu den Funktionen, die die Komponente umfasst.
Mit dem Hook useFilteredOptions wird der Filtermechanismus basierend auf Benutzereingaben implementiert. Aus Gründen der Übersichtlichkeit und Einfachheit ist er jedoch in einigen Beispielen nicht enthalten. Genauere Informationen zu dem Hook finden Sie hier.
Note: Die meisten Funktionen und Eigenschaften der vier verfügbaren Dropdown-Komponenten unterscheiden sich bei der Verwendung nicht. Einige Beispiele aus anderen Komponenten können auch für MultipleCombobox relevant sein.
Sie können jede der Dropdown-Komponenten vollständig deaktivieren, indem Sie die Eigenschaft disabled auf true festlegen. Mit der Eigenschaft disabled der Komponenten SelectOption und ComboboxOption können Sie auch nur bestimmte Optionen deaktivieren. Wenn die gesamte Komponente deaktiviert ist, hat die Eigenschaft disabled der Optionen keine Auswirkungen.
Dieses Verhalten ist bei allen Dropdown-Komponenten gleich: Wenn die value-Eigenschaft festgelegt ist, kann der Benutzer die Komponente nicht direkt ändern. Stattdessen wird sie vollständig über die Implementierung durch Entwickler verwaltet.
Dieses Beispiel gilt für alle Dropdown-Komponenten:
exportfunctionMultiComboControlled(){ const[updatedValue, setNewValue]=useState([]); constonChange=(e, newValue)=>{ setNewValue(newValue); }; const options =[ <ComboboxOption value={{ id:'1', label:'Option 1', }} />, <ComboboxOption value={{ id:'2', label:'Option 2', }} />, <ComboboxOption value={{ id:'3', label:'Option 3', }} />, <ComboboxOption value={{ id:'4', label:'Option 4', }} />, <ComboboxOption value={{ id:'5', label:'Option 5', }} />, ]; return( <div> <MultipleCombobox label="Choose values" secondaryLabel="This value will be passed to the list of options below" onChange={onChange}> {options} </MultipleCombobox> <br/> <MultipleCombobox label="Changes with the above" value={updatedValue}> {options} </MultipleCombobox> </div> ); }
Mit der Eigenschaft ref und den zwingend erforderlichen Handlern (focus, blur und scrollIntoView) ist es möglich, verschiedene native Aktionen auszuführen. Ein Beispiel ist das Setzen des Fokus auf die Komponente.
Dies ist ein Beispiel unter Verwendung der Komponente MultipleCombobox:
In den Dropdown-Komponenten lässt sich der Validierungsprozess nicht durchführen, aber Sie können den Fehlerstatus und die anzuzeigenden Meldungen über die Eigenschaft stateMessages bearbeiten.
Die Logik der Statusmeldungen gilt für alle Dropdown-Komponenten. Nachfolgend ein Beispiel für MultipleSelect:
Der Hook useFilteredOptions bietet eine grundlegende Datenverarbeitung für die Filterung.
importReact,{ useState }from'react'; import{IntlMessageShape}from'@jutro/prop-types'; import{ useTranslator }from'@jutro/locale'; type SelectValue={ id: string; label:IntlMessageShape; [index:PropertyKey]: unknown; }; /** * @typedef {Object} FilterHookReturnObject * @property {TValue[]} filteredOptions - array of filtered options * @property {function} onSearch - function that takes the onSearch input event * and filters the options based on it * @property {function} resetFilter - used to reset the filtering for options, * after using filteredOptions array resets to initial one * @property {function} onAddNew - function that adds new value to the internal * options array inside the hook and calls appendToSelection that is responsible * for selecting this new value inside the dropdown */ /** * Helper hook for filtering options based on user input. * * @param {TValue[]} initialOptions - initial list of options in component * @param {function} createNewValue - function for constructing value object * from string * @param {function} appendToSelection - callback that is responsible for * appending value to the controlled list of selected values * * @returns {FilterHookReturnObject} - helpers for filtering purposes: * filtered options array, onAddNew and onSearch function to be supplied * to component and resetFilter function */ exportconst useFilteredOptions =<TValueextendsSelectValue=SelectValue>( initialOptions:TValue[], createNewValue?:(value: string)=>TValue, appendToSelection?:(value:TValue)=>void ):{ filteredOptions:TValue[]; onSearch:(event:React.ChangeEvent<HTMLInputElement>) => void; resetFilter: () => void; onAddNew: (newValue: string) => void; } => { const translator =useTranslator(); const[query, setQuery]=useState(''); const[options, setOptions]=useState(initialOptions); // Basic filtering. This part should be changed to cover your needs. const filteredOptions = options.filter(val=> translator(val.label) .trim() .toLowerCase() .includes(query.trim().toLowerCase()) ); // Function that should be passed to the Combobox onSearch prop. // It gets the value of the search term inside Combobox. const onSearch =(event:React.ChangeEvent<HTMLInputElement>) => { setQuery(event.target.value); }; // Function that is responsible for clearing the query // only when the Combobox is on active browser tab. // Typically connected to Combobox onBlur. const resetFilter = () => { if(document.visibilityState==='visible'&&document.hasFocus()){ setQuery(''); } }; // Function responsible on adding new values to both // internal state of filtered items and external // controlled state value const onAddNew = (newValue: string) => { const valueTransformed = createNewValue?.(newValue); setQuery(''); if(valueTransformed){ // adds the value to the internal state setOptions(prevOptions=>[...prevOptions, valueTransformed]); // adds the value to the controlled state appendToSelection?.(valueTransformed); } }; return { filteredOptions, onSearch, resetFilter, onAddNew }; };
Beispielimplementierung mit asynchronen API-Aufrufen
Asynchrone API-Aufrufe werden nicht innerhalb des Basis-Hooks useFilteredOptions verarbeitet. Zu diesem Zweck müssen Sie möglicherweise eine eigene Implementierung erstellen, die auf Ihre speziellen Anforderungen zugeschnitten ist. Hier ein Beispiel für einen benutzerdefinierten Hook für die Komponente MultipleCombobox:
importReact,{ useEffect, useState }from'react'; import{ComboboxOption,MultipleCombobox}from'@jutro/components'; import{ useTranslator }from'@jutro/locale'; import{IntlMessageShape}from'@jutro/prop-types'; type SelectValue={ id: string; label:IntlMessageShape; [index:PropertyKey]: unknown; }; constsomeAPICallback=asyncquery=>{ console.log('calling the API'); constCHARACTERS=[ {id:'1',label:'Anakin Skywalker'}, {id:'2',label:'Luke Skywalker'}, {id:'3',label:'Master Yoda'}, {id:'4',label:'Han Solo'}, ]; const result =newPromise(resolve=>{ setTimeout( ()=> resolve( CHARACTERS.filter(val=> val.label .trim() .toLowerCase() .includes(query.trim().toLowerCase()) ) ), 3000 ); }); return result; }; const useFilteredOptions =<TValueextendsSelectValue=SelectValue>():{ filteredOptions:TValue[]; onSearch:(event:React.ChangeEvent<HTMLInputElement>) => void; resetFilter: () => void; loading: boolean; } => { const[query, setQuery]=useState(''); const[filteredOptions, setFilteredOptions]=useState([]); const[loading, setLoading]=useState(true); useEffect(()=>{ setLoading(true); // This is a simple example only, the API callback should be debounced // to ensure the async operation does not overlap with the query change. someAPICallback(query).then((opts:TValue[])=>{ setFilteredOptions(opts); setLoading(false); }); },[query]); // Function that should be passed to the Combobox onSearch prop. // It gets the value of the search term inside Combobox. const onSearch =(event:React.ChangeEvent<HTMLInputElement>) => { setQuery(event.target.value); }; // Function that is responsible for clearing the query // only when the Combobox is on active browser tab. // Typically connected to Combobox onBlur. const resetFilter = () => { if(document.visibilityState==='visible'&&document.hasFocus()){ setQuery(''); } }; return { filteredOptions, onSearch, resetFilter, loading }; }; export const Welcome: React.FC = () => { const translator =useTranslator(); const{ filteredOptions, onSearch, resetFilter, loading }= useFilteredOptions(); return( <MultipleCombobox label="Select options" secondaryLabel="Options filtered by user input" onSearch={onSearch} onBlur={resetFilter} > {loading ?( <span>{translator('Loading...')}</span> ):( filteredOptions.map(({ id, label })=>( <ComboboxOptionkey={id}value={{ id, label }}/> )) )} </MultipleCombobox> ); };
Das Standardverhalten der MultipleCombobox-Komponente besteht darin, Options-Tags zu reduzieren, wenn sie nicht in eine einzige Zeile passen. Die Komponente wird zu einer Ansicht mit mehreren Zeilen erweitert, wenn Sie auf das Tag mit den zusammengeführten Optionen klicken. Dieses Verhalten wird über die Eigenschaft tagsAlwaysExpanded gesteuert, die standardmäßig auf false festgelegt ist.
Um das Löschen der Eingabe mit einem einzigen Klick auf die Symbolschaltfläche zu aktivieren, legen Sie die clearable-Eigenschaft auf true fest. Die Schaltfläche wird angezeigt, wenn mindestens eine Option ausgewählt ist oder Text eingegeben wird. Der Benutzer kann gleichzeitig die Auswahl der Optionen aufheben und den eingegebenen Text löschen.
Die tagsAlwaysExpanded-Eigenschaft wurde hinzugefügt. Wenn sie auf true festgelegt ist, wird das Standardverhalten für reduzierte Options-Tags überschrieben.
Die clearable-Eigenschaft wurde hinzugefügt. Wenn sie auf true festgelegt ist, kann der Benutzer mit einem einzigen Klick auf die Symbolschaltfläche die Auswahl der Optionen aufheben oder den eingegebenen Text löschen.
Es wurde die neue Komponente @jutro/components/MultipleCombobox eingeführt.
Die frühere Komponente TypeaheadMultiSelectField wurde abgekündigt und in das @jutro/legacy-Paket verschoben. Um die entsprechende Dokumentation anzuzeigen, wechseln Sie zu einer Version der Dokumentation, die älter als 10.0 ist.
Aufbau der Dropdown-Komponente, Variante Mehrfach-Kombinationsfeld.
