From 9d011056bc0d4c88d63fa93db08c81d66bf03fde Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 7 Jun 2025 20:30:26 +0800
Subject: [PATCH 1/3] fix(autocomplete): add onClear

---
 apps/docs/content/docs/components/autocomplete.mdx       | 6 ++++++
 packages/components/autocomplete/src/use-autocomplete.ts | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
index 039ea50dc1..3856d28d4f 100644
--- a/apps/docs/content/docs/components/autocomplete.mdx
+++ b/apps/docs/content/docs/components/autocomplete.mdx
@@ -811,6 +811,12 @@ properties to customize the popover, listbox and input components.
       type: "() => void",
       description: "Handler that is called when the Autocomplete's Popover is closed.",
       default: "-"
+    },
+    {
+      attribute: "onClear",
+      type: "() => void",
+      description: "Handler that is called when the clear button is clicked.",
+      default: "-"
     }
   ]}
 />
diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts
index 8f46f84c5c..a7ac0c7750 100644
--- a/packages/components/autocomplete/src/use-autocomplete.ts
+++ b/packages/components/autocomplete/src/use-autocomplete.ts
@@ -111,6 +111,11 @@ interface Props<T> extends Omit<HTMLHeroUIProps<"input">, keyof ComboBoxProps<T>
    * Callback fired when the select menu is closed.
    */
   onClose?: () => void;
+  /**
+   * Callback fired when the value is cleared.
+   * if you pass this prop, the clear button will be shown.
+   */
+  onClear?: () => void;
   /**
    * Whether to enable virtualization of the listbox items.
    * By default, virtualization is automatically enabled when the number of items is greater than 50.
@@ -186,6 +191,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     errorMessage,
     onOpenChange,
     onClose,
+    onClear,
     isReadOnly = false,
     ...otherProps
   } = props;
@@ -453,6 +459,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
         }
         state.setInputValue("");
         state.open();
+        onClear?.();
       },
       "data-visible": !!state.selectedItem || state.inputValue?.length > 0,
       className: slots.clearButton({

From 3742dcda1fad9259f012924bc9f2d3c725fd1808 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 7 Jun 2025 20:37:12 +0800
Subject: [PATCH 2/3] feat(autocomplete): add test case for onClear

---
 .../autocomplete/__tests__/autocomplete.test.tsx   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
index c8a8f418da..f6f415ce7c 100644
--- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx
+++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
@@ -171,9 +171,16 @@ describe("Autocomplete", () => {
     expect(autocomplete).toHaveFocus();
   });
 
-  it("should clear value after clicking clear button", async () => {
+  it("should clear the value and onClear is triggered", async () => {
+    const onClear = jest.fn();
+
     const wrapper = render(
-      <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+      <Autocomplete
+        aria-label="Favorite Animal"
+        data-testid="autocomplete"
+        label="Favorite Animal"
+        onClear={onClear}
+      >
         <AutocompleteItem key="penguin">Penguin</AutocompleteItem>
         <AutocompleteItem key="zebra">Zebra</AutocompleteItem>
         <AutocompleteItem key="shark">Shark</AutocompleteItem>
@@ -204,6 +211,9 @@ describe("Autocomplete", () => {
     // click the clear button
     await user.click(clearButton);
 
+    // onClear is triggered
+    expect(onClear).toHaveBeenCalledTimes(1);
+
     // assert that the input has empty value
     expect(autocomplete).toHaveValue("");
 

From 64ecadeaface747120be1f06bf74e2ed8747451e Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sat, 7 Jun 2025 20:38:01 +0800
Subject: [PATCH 3/3] chore(changeset): add changeset

---
 .changeset/real-apes-invite.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/real-apes-invite.md

diff --git a/.changeset/real-apes-invite.md b/.changeset/real-apes-invite.md
new file mode 100644
index 0000000000..5c338fbf30
--- /dev/null
+++ b/.changeset/real-apes-invite.md
@@ -0,0 +1,5 @@
+---
+"@heroui/autocomplete": patch
+---
+
+support onClear in Autocomplete (#5297)