@moda/om 17.14.2 → 18.0.0

package/src/components/SearchInput/SearchInput.test.tsx

@@ -14,4 +14,18 @@ describe('SearchInput', () => {
 
     expect(screen.getByRole('textbox')).toHaveValue('');
   });
+
+  it('calls onChange when typing', async () => {
+    const onChange = jest.fn();
+
+    render(<SearchInput value='' onChange={onChange} />);
+
+    await userEvent.type(screen.getByRole('textbox'), 'Greetings');
+
+    expect(onChange).toHaveBeenCalledWith('Greetings');
+
+    await userEvent.click(screen.getByRole('button'));
+
+    expect(onChange).toHaveBeenCalledWith('');
+  });
 });

package/src/components/SearchInput/SearchInput.tsx

@@ -9,7 +9,6 @@ import './SearchInput.scss';
 export type SearchInputProps = TextInputProps & {
   value?: string;
   onClear?(): void;
-  onChangeValue?(value: string): void;
 };
 
 const DEFAULT_INPUT_VALUE = '';
@@ -17,7 +16,6 @@ const DEFAULT_INPUT_VALUE = '';
 export const SearchInput: React.FC<SearchInputProps> = ({
   className,
   onChange,
-  onChangeValue,
   onClear,
   value = DEFAULT_INPUT_VALUE,
   ...rest
@@ -26,13 +24,12 @@ export const SearchInput: React.FC<SearchInputProps> = ({
 
   const [controlledValue, setValue] = useState(value);
 
-  const handleClick = useCallback(() => {
+  const handleClear = useCallback(() => {
     setValue(DEFAULT_INPUT_VALUE);
-    onClear && onClear();
-    if (ref.current) {
-      ref.current.focus();
-    }
-  }, [onClear]);
+    onChange?.(DEFAULT_INPUT_VALUE);
+    onClear?.();
+    ref.current?.focus();
+  }, [onClear, onChange]);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -44,10 +41,6 @@ export const SearchInput: React.FC<SearchInputProps> = ({
 
   useEffect(() => setValue(value), [value]);
 
-  useEffect(() => {
-    onChangeValue && onChangeValue(controlledValue);
-  }, [controlledValue, onChangeValue]);
-
   return (
     <div className={classNames('SearchInput', className)}>
       <div className='SearchInput__icon'>
@@ -63,7 +56,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
       />
 
       {controlledValue && (
-        <Clickable className='SearchInput__clear' onClick={handleClick} type='reset'>
+        <Clickable className='SearchInput__clear' onClick={handleClear} type='reset'>
           <ExitIcon />
         </Clickable>
       )}