diff --git a/.changeset/tough-spies-tease.md b/.changeset/tough-spies-tease.md new file mode 100644 index 0000000000..5be816c5e8 --- /dev/null +++ b/.changeset/tough-spies-tease.md @@ -0,0 +1,8 @@ +--- +"@nextui-org/autocomplete": patch +"@nextui-org/dropdown": patch +"@nextui-org/popover": patch +"@nextui-org/tooltip": patch +--- + +fix(autocomplete): support isReadOnly for dynamic collections in Autocomplete diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index 2e688057de..65052b4ae3 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -163,15 +163,12 @@ export function useAutocomplete(originalProps: UseAutocomplete // Setup filter function and state. const {contains} = useFilter(filterOptions); - const state = useComboBoxState({ + let state = useComboBoxState({ ...originalProps, children, menuTrigger, shouldCloseOnBlur, allowsEmptyCollection, - ...(isReadOnly && { - disabledKeys: (children as unknown as Record[]).map((o) => o.key), - }), defaultFilter: defaultFilter && typeof defaultFilter === "function" ? defaultFilter : contains, onOpenChange: (open, menuTrigger) => { onOpenChange?.(open, menuTrigger); @@ -181,6 +178,13 @@ export function useAutocomplete(originalProps: UseAutocomplete }, }); + state = { + ...state, + ...(isReadOnly && { + disabledKeys: new Set([...state.collection.getKeys()].map((k) => k)), + }), + }; + // Setup refs and get props for child elements. const buttonRef = useRef(null); const inputWrapperRef = useRef(null);