diff --git a/.changeset/popular-pigs-begin.md b/.changeset/popular-pigs-begin.md new file mode 100644 index 0000000000..f5d0a05413 --- /dev/null +++ b/.changeset/popular-pigs-begin.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/autocomplete": patch +--- + +automatically focus first non-disabled item diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index b6a9cae1ab..6f84d1c979 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -317,6 +317,16 @@ export function useAutocomplete(originalProps: UseAutocomplete } }, [inputRef.current]); + // focus first non-disabled item + useEffect(() => { + let key = state.collection.getFirstKey(); + + while (key && state.disabledKeys.has(key)) { + key = state.collection.getKeyAfter(key); + } + state.selectionManager.setFocusedKey(key); + }, [state.collection, state.disabledKeys]); + useEffect(() => { if (isOpen) { // apply the same with to the popover as the select