diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f74385d..73d4892c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,7 @@ - When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry - Remove react-autobind dependency - Remove usage of legacy `childContextTypes` API -- Replace react-autosuggest with Downshift in the autocomplete component +- Replace react-autocomplete with Downshift in the autocomplete component - _...Add new stuff here..._ ### 🐞 Bug fixes diff --git a/src/components/InputAutocomplete.tsx b/src/components/InputAutocomplete.tsx index 79c28733..01172324 100644 --- a/src/components/InputAutocomplete.tsx +++ b/src/components/InputAutocomplete.tsx @@ -21,9 +21,13 @@ export default function InputAutocomplete({ 'aria-label': ariaLabel, }: InputAutocompleteProps) { const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT) + const [input, setInput] = React.useState(value || '') const autocompleteMenuEl = React.useRef(null) - const items = options + const filteredItems = React.useMemo(() => { + const lv = input.toLowerCase() + return options.filter((item) => item[0].toLowerCase().includes(lv)) + }, [options, input]) const { isOpen, @@ -31,21 +35,28 @@ export default function InputAutocomplete({ getInputProps, getItemProps, highlightedIndex, - inputValue, + openMenu, } = useCombobox({ - items, - inputValue: value, + items: filteredItems, + inputValue: input, itemToString: (item) => (item ? item[0] : ''), onSelectedItemChange: ({selectedItem}) => { + const v = selectedItem ? selectedItem[0] : '' + setInput(v) onChange(selectedItem ? selectedItem[0] : undefined) }, onInputValueChange: ({inputValue: v}) => { - if (v !== undefined && v !== inputValue) { + if (typeof v === 'string') { + setInput(v) onChange(v === '' ? undefined : v) } }, }) + React.useEffect(() => { + setInput(value || '') + }, [value]) + const calcMaxHeight = React.useCallback(() => { if (keepMenuWithinWindowBounds && autocompleteMenuEl.current) { const maxHeightLocal = window.innerHeight - @@ -68,6 +79,7 @@ export default function InputAutocomplete({ 'aria-label': ariaLabel, className: 'maputnik-string', spellCheck: false, + onFocus: () => openMenu(), })} />
{isOpen && - items.map((item, index) => ( + filteredItems.map((item, index) => (