fix: isReadOnly in Autocomplete (#2429)

* feat(autocomplete): add isReadOnly example

* fix(autocomplete): isReadOnly logic in Autocomplete

* feat(root): add changeset - fixed isReadOnly logic in Autocomplete

* chore(stories): set isClearable to false

* fix(autocomplete): revise isClearable logic

.changeset/thirty-bugs-beg.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/autocomplete": patch
+---
+
+fixed isReadOnly logic in Autocomplete (#2420)

packages/components/autocomplete/src/use-autocomplete.ts

@@ -123,6 +123,8 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
   const isClearable =
     originalProps.disableClearable !== undefined
       ? !originalProps.disableClearable
+      : originalProps.isReadOnly
+      ? false
       : originalProps.isClearable;
 
   const {
@@ -154,6 +156,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     classNames,
     onOpenChange,
     onClose,
+    isReadOnly = false,
     ...otherProps
   } = props;
 
@@ -166,6 +169,9 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     menuTrigger,
     shouldCloseOnBlur,
     allowsEmptyCollection,
+    ...(isReadOnly && {
+      disabledKeys: (children as unknown as Record<string, any>[]).map((o) => o.key),
+    }),
     defaultFilter: defaultFilter && typeof defaultFilter === "function" ? defaultFilter : contains,
     onOpenChange: (open, menuTrigger) => {
       onOpenChange?.(open, menuTrigger);

packages/components/autocomplete/stories/autocomplete.stories.tsx

@@ -55,6 +55,11 @@ export default {
         type: "boolean",
       },
     },
+    isReadonly: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -654,6 +659,16 @@ export const Required = {
   },
 };
 
+export const ReadOnly = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    selectedKey: "cat",
+    isReadOnly: true,
+  },
+};
+
 export const Disabled = {
   render: Template,