From 7e3aa287a2d3987ff82d2f7cda37194db3533cfa Mon Sep 17 00:00:00 2001
From: Osama Abdul Latif <62595605+OsamaAbdellateef@users.noreply.github.com>
Date: Thu, 18 Jan 2024 15:07:03 +0200
Subject: [PATCH] [DSTSUP-21]: Adding `onClear` over `Autocomplete` component
 (#3645)

---
 .changeset/tender-radios-begin.md             |  5 +++++
 .../src/Autocomplete/Autocomplete.test.tsx    | 19 +++++++++++++++++++
 .../src/Autocomplete/Autocomplete.tsx         | 11 ++++++++---
 .../src/Autocomplete/ClearButton.tsx          | 12 ++++++++++--
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/tender-radios-begin.md

diff --git a/.changeset/tender-radios-begin.md b/.changeset/tender-radios-begin.md
new file mode 100644
index 0000000000..690a416225
--- /dev/null
+++ b/.changeset/tender-radios-begin.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+Adding onClear prop over Autocomplete component
diff --git a/packages/components/src/Autocomplete/Autocomplete.test.tsx b/packages/components/src/Autocomplete/Autocomplete.test.tsx
index ef8ce9323f..b667005565 100644
--- a/packages/components/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/components/src/Autocomplete/Autocomplete.test.tsx
@@ -360,6 +360,25 @@ test('supports autocompletion', async () => {
   expect(input).toHaveValue('Spinach');
 });
 
+test('supports clear input value', async () => {
+  render(
+    <Autocomplete label="Label" data-testid="input-field">
+      <Autocomplete.Item id="spinach">Spinach</Autocomplete.Item>
+      <Autocomplete.Item id="carrots">Carrots</Autocomplete.Item>
+      <Autocomplete.Item id="broccoli">Broccoli</Autocomplete.Item>
+      <Autocomplete.Item id="garlic">Garlic</Autocomplete.Item>
+    </Autocomplete>
+  );
+
+  const input = screen.getByRole('combobox');
+  await user.type(input, 'sp');
+
+  const clearButton = screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
+  await user.click(clearButton);
+  expect(input).toHaveValue('');
+});
+
 test('supports submit handler', async () => {
   const spy = jest.fn();
 
diff --git a/packages/components/src/Autocomplete/Autocomplete.tsx b/packages/components/src/Autocomplete/Autocomplete.tsx
index c894f2a72c..51864373ae 100644
--- a/packages/components/src/Autocomplete/Autocomplete.tsx
+++ b/packages/components/src/Autocomplete/Autocomplete.tsx
@@ -18,9 +18,10 @@ import { AutocompleteClearButton } from './ClearButton';
 //----------------
 interface SearchInputProps {
   onSubmit?: (key: Key | null, value: string | null) => void;
+  onClear?: () => void;
   ref?: Ref<HTMLInputElement> | undefined;
 }
-const SearchInput = ({ onSubmit, ref }: SearchInputProps) => {
+const SearchInput = ({ onSubmit, onClear, ref }: SearchInputProps) => {
   const state = React.useContext(ComboBoxStateContext);
 
   return (
@@ -28,7 +29,9 @@ const SearchInput = ({ onSubmit, ref }: SearchInputProps) => {
       ref={ref}
       icon={<SearchIcon />}
       action={
-        state?.inputValue !== '' ? <AutocompleteClearButton /> : undefined
+        state?.inputValue !== '' ? (
+          <AutocompleteClearButton onClear={onClear} />
+        ) : undefined
       }
       onKeyDown={e => {
         if (e.key === 'Enter' || e.key === 'Escape') {
@@ -81,6 +84,7 @@ export interface AutocompleteProps
   defaultValue?: RAC.ComboBoxProps<object>['defaultInputValue'];
   value?: RAC.ComboBoxProps<object>['inputValue'];
   onChange?: RAC.ComboBoxProps<object>['onInputChange'];
+  onClear?: () => void;
   disabled?: RAC.ComboBoxProps<object>['isDisabled'];
   required?: RAC.ComboBoxProps<object>['isRequired'];
   error?: RAC.ComboBoxProps<object>['isInvalid'];
@@ -113,6 +117,7 @@ const _Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
       defaultValue,
       value,
       onChange,
+      onClear,
       onSubmit,
       disabled,
       error,
@@ -138,7 +143,7 @@ const _Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
     return (
       <>
         <FieldBase as={ComboBox} {...props}>
-          <SearchInput onSubmit={onSubmit} ref={ref} />
+          <SearchInput onSubmit={onSubmit} onClear={onClear} ref={ref} />
           <Popover>
             <ListBox>{children}</ListBox>
           </Popover>
diff --git a/packages/components/src/Autocomplete/ClearButton.tsx b/packages/components/src/Autocomplete/ClearButton.tsx
index c808076f15..c521e2e953 100644
--- a/packages/components/src/Autocomplete/ClearButton.tsx
+++ b/packages/components/src/Autocomplete/ClearButton.tsx
@@ -7,16 +7,24 @@ import { Button } from '../Button';
 
 export interface ClearButtonProps {
   className?: string;
+  onClear?: () => void;
 }
 
-export const AutocompleteClearButton = ({ className }: ClearButtonProps) => {
+export const AutocompleteClearButton = ({
+  className,
+  onClear,
+}: ClearButtonProps) => {
   let state = React.useContext(ComboBoxStateContext);
 
   return (
     <Button
       // Don't inherit default Button behavior from ComboBox.
       aria-label="Clear"
-      onPress={() => state?.setInputValue('')}
+      data-testid="clear-button"
+      onPress={() => {
+        state?.setInputValue('');
+        onClear?.();
+      }}
       variant="icon"
       className={cn(
         'cursor-pointer appearance-none border-none p-0 pr-1',