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 78e4087b2a619c8b870754ad80e11b3f9805d395 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: Tue, 5 Mar 2024 21:00:21 +0800 Subject: [PATCH 4/5] chore(stories): set isClearable to false --- .../components/autocomplete/stories/autocomplete.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx index db9186346c..6d54c4c0f7 100644 --- a/packages/components/autocomplete/stories/autocomplete.stories.tsx +++ b/packages/components/autocomplete/stories/autocomplete.stories.tsx @@ -666,6 +666,7 @@ export const ReadOnly = { ...defaultProps, selectedKey: "cat", isReadOnly: true, + isClearable: false, }, }; From 91ebc4af28fccf85535adf53b690ab50499083c7 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: Tue, 5 Mar 2024 21:13:39 +0800 Subject: [PATCH 5/5] fix(autocomplete): revise isClearable logic --- packages/components/autocomplete/src/use-autocomplete.ts | 2 ++ .../components/autocomplete/stories/autocomplete.stories.tsx | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index f518735b5d..8ce5171884 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -123,6 +123,8 @@ export function useAutocomplete(originalProps: UseAutocomplete const isClearable = originalProps.disableClearable !== undefined ? !originalProps.disableClearable + : originalProps.isReadOnly + ? false : originalProps.isClearable; const { diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx index 6d54c4c0f7..db9186346c 100644 --- a/packages/components/autocomplete/stories/autocomplete.stories.tsx +++ b/packages/components/autocomplete/stories/autocomplete.stories.tsx @@ -666,7 +666,6 @@ export const ReadOnly = { ...defaultProps, selectedKey: "cat", isReadOnly: true, - isClearable: false, }, };