From 63e41630457a498d37a4c16cbb650a1f2328b0b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Sat, 2 Mar 2024 18:14:50 +0800 Subject: [PATCH 1/5] feat(autocomplete): add isReadOnly example --- .../autocomplete/stories/autocomplete.stories.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx index 7eef7a2e75..db9186346c 100644 --- a/packages/components/autocomplete/stories/autocomplete.stories.tsx +++ b/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, From 7cba6cbe509bd07a1f37bb0f3a575c228768ba55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Sat, 2 Mar 2024 18:15:18 +0800 Subject: [PATCH 2/5] fix(autocomplete): isReadOnly logic in Autocomplete --- packages/components/autocomplete/src/use-autocomplete.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index 1928c37d63..f518735b5d 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -154,6 +154,7 @@ export function useAutocomplete(originalProps: UseAutocomplete classNames, onOpenChange, onClose, + isReadOnly = false, ...otherProps } = props; @@ -166,6 +167,9 @@ export function useAutocomplete(originalProps: UseAutocomplete 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); From b56313d3a6814a68ea2115aa79e512a2c3ea1d5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Sat, 2 Mar 2024 18:16:24 +0800 Subject: [PATCH 3/5] feat(root): add changeset - fixed isReadOnly logic in Autocomplete --- .changeset/thirty-bugs-beg.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thirty-bugs-beg.md diff --git a/.changeset/thirty-bugs-beg.md b/.changeset/thirty-bugs-beg.md new file mode 100644 index 0000000000..80982defb3 --- /dev/null +++ b/.changeset/thirty-bugs-beg.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/autocomplete": patch +--- + +fixed isReadOnly logic in Autocomplete (#2420) From a901ee3dcf3e4a3409e96fbd88591b6e5d3606b8 Mon Sep 17 00:00:00 2001 From: Alpha <116849110+alpha-xek@users.noreply.github.com> Date: Tue, 5 Mar 2024 04:43:42 +0530 Subject: [PATCH 4/5] chore(autocomplete component) isReadOnly property demo isReadOnly property demo in website MDX for autocomplete component. --- .../content/components/autocomplete/index.ts | 2 + .../components/autocomplete/read-only.ts | 54 +++++++++++++++++++ .../content/docs/components/autocomplete.mdx | 7 +++ 3 files changed, 63 insertions(+) create mode 100644 apps/docs/content/components/autocomplete/read-only.ts diff --git a/apps/docs/content/components/autocomplete/index.ts b/apps/docs/content/components/autocomplete/index.ts index 1e809cdf14..b54d80e6d4 100644 --- a/apps/docs/content/components/autocomplete/index.ts +++ b/apps/docs/content/components/autocomplete/index.ts @@ -24,6 +24,7 @@ import asyncLoadingItems from "./async-loading-items"; import sections from "./sections"; import customSectionsStyle from "./custom-sections-style"; import customStyles from "./custom-styles"; +import readOnly from "./read-only"; export const autocompleteContent = { usage, @@ -52,4 +53,5 @@ export const autocompleteContent = { sections, customSectionsStyle, customStyles, + readOnly, }; diff --git a/apps/docs/content/components/autocomplete/read-only.ts b/apps/docs/content/components/autocomplete/read-only.ts new file mode 100644 index 0000000000..006d69b118 --- /dev/null +++ b/apps/docs/content/components/autocomplete/read-only.ts @@ -0,0 +1,54 @@ +const data = `export const animals = [ + {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", value: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", value: "elephant", description: "The largest land animal"}, + {label: "Lion", value: "lion", description: "The king of the jungle"}, + {label: "Tiger", value: "tiger", description: "The largest cat species"}, + {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + value: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", value: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + value: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + value: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, +];`; + +const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {animals} from "./data"; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +}`; + +const react = { + "/App.jsx": App, + "/data.js": data, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx index 435dfa31a7..5f73f368bb 100644 --- a/apps/docs/content/docs/components/autocomplete.mdx +++ b/apps/docs/content/docs/components/autocomplete.mdx @@ -68,6 +68,13 @@ the end of the label and the autocomplete will be required. +### Read Only + +If you pass the `isReadOnly` property to the autocomplete, the listbox will open to display +all available options, but users won't be able to select any of the listed options. + + + ### Sizes From d0db40dcac7b2bdf3784e68da52fe120ce827d56 Mon Sep 17 00:00:00 2001 From: Alpha Xek <116849110+alphaxek@users.noreply.github.com> Date: Wed, 6 Mar 2024 03:42:01 +0530 Subject: [PATCH 5/5] Update apps/docs/content/docs/components/autocomplete.mdx Co-authored-by: Junior Garcia --- apps/docs/content/docs/components/autocomplete.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx index 5f73f368bb..21028d77c6 100644 --- a/apps/docs/content/docs/components/autocomplete.mdx +++ b/apps/docs/content/docs/components/autocomplete.mdx @@ -70,7 +70,7 @@ the end of the label and the autocomplete will be required. ### Read Only -If you pass the `isReadOnly` property to the autocomplete, the listbox will open to display +If you pass the `isReadOnly` property to the Autocomplete, the Listbox will open to display all available options, but users won't be able to select any of the listed options.