From eb2af670f6a59fe056f7a3cbe75c04ab56bf5148 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 18 Oct 2025 19:36:12 +0800 Subject: [PATCH 1/2] fix(autocomplete): close button display on mobile --- .changeset/four-candles-applaud.md | 5 +++++ packages/components/autocomplete/src/use-autocomplete.ts | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/four-candles-applaud.md diff --git a/.changeset/four-candles-applaud.md b/.changeset/four-candles-applaud.md new file mode 100644 index 0000000000..9dfdb90abc --- /dev/null +++ b/.changeset/four-candles-applaud.md @@ -0,0 +1,5 @@ +--- +"@heroui/autocomplete": patch +--- + +fix close button display in autocomplete on mobile (#5826) diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index 8133444cd4..98e5cb78e4 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -464,7 +464,8 @@ export function useAutocomplete(originalProps: UseAutocomplete state.open(); onClear?.(); }, - "data-visible": !!state.selectedItem || state.inputValue?.length > 0, + "data-visible": + (!!state.selectedItem || state.inputValue?.length > 0) && !originalProps.isDisabled, className: slots.clearButton({ class: clsx(classNames?.clearButton, slotsProps.clearButtonProps?.className), }), From ed9cd3b3c4691ce22ebd9ee8ea0e91841a994155 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 18 Oct 2025 21:12:57 +0800 Subject: [PATCH 2/2] refactor(autocomplete): disable isClearable if isDisabled is true --- packages/components/autocomplete/src/use-autocomplete.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index 98e5cb78e4..8e4987575d 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -154,9 +154,11 @@ export function useAutocomplete(originalProps: UseAutocomplete const isClearable = originalProps.disableClearable !== undefined ? !originalProps.disableClearable - : originalProps.isReadOnly + : originalProps.isDisabled ? false - : originalProps.isClearable; + : originalProps.isReadOnly + ? false + : originalProps.isClearable; const { ref, @@ -464,8 +466,7 @@ export function useAutocomplete(originalProps: UseAutocomplete state.open(); onClear?.(); }, - "data-visible": - (!!state.selectedItem || state.inputValue?.length > 0) && !originalProps.isDisabled, + "data-visible": !!state.selectedItem || state.inputValue?.length > 0, className: slots.clearButton({ class: clsx(classNames?.clearButton, slotsProps.clearButtonProps?.className), }),