} // Skip disabled options while (selectOptions[indexToFocus].isDisabled) { indexToFocus++; if (indexToFocus === selectOptions.length) { indexToFocus = 0; } } } setActiveAndFocusedItem(indexToFocus); }; const onInputKeyDown = (event: React.KeyboardEvent) => { const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null; switch (event.key) { case 'Enter': if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) { onSelect(focusedItem.value); } if (!isOpen) { setIsOpen(true); } break; case 'ArrowUp': case 'ArrowDown': event.preventDefault(); handleMenuArrowKeys(event.key); break; } }; const onToggleClick = () => { setIsOpen(!isOpen); textInputRef?.current?.focus(); }; const onTextInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); resetActiveAndFocusedItem(); }; const onSelect = (value: string) => { if (value && value !== NO_RESULTS) { // eslint-disable-next-line no-console console.log('selected', value); setSelected( selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value] ); } textInputRef.current?.focus(); }; const onClearButtonClick = () => { setSelected([]); setInputValue(''); resetActiveAndFocusedItem(); textInputRef?.current?.focus(); }; const toggle = (toggleRef: React.Ref) => (
} /> ); return (
); };