[DSTSUP-21]: Adding onClear over Autocomplete component (#3645)

marigold-ui · Jan 18, 2024 · 7e3aa28 · 7e3aa28
1 parent 139190e
commit 7e3aa28
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 5 deletions.
diff --git a/.changeset/tender-radios-begin.md 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
@@ -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
@@ -18,17 +18,20 @@ 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 (
     <Input
       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
@@ -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',