add autoFocus prop/capability to FilterInput component

src/core/modules/components/FilterInput.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState, useRef } from 'react';
 import { joinClassNames } from '@vizality/util/dom';
 import { getModule } from '@vizality/webpack';
 import { Messages } from '@vizality/i18n';
@@ -9,27 +9,18 @@ import { Icon } from '.';
  * @component
  * @returns {}
  */
-export default memo(({ size, disabled, value, placeholder, loading, minLength = 4, debounce = 200, inputClassName, className, onChange, ...other }) => {
+export default memo(({ size, disabled, value, autoFocus, placeholder, loading, minLength = 4, debounce = 200, inputClassName, className, onChange, ...other }) => {
   const [ query, setQuery ] = useState(value || '');
-  const { container, inner, disabled: _disabled, small, medium, large, input, clear, iconLayout, iconContainer, icon, visible, pointer } = getModule('container', 'inner', 'small', 'input', 'clear');
+  const inputRef = useRef(null);
+  const { container, inner, disabled: _disabled, small, input, clear, iconLayout, iconContainer, icon, visible, pointer } = getModule('container', 'inner', 'small', 'input', 'clear');
 
-  /**
-   * Check if size prop matches one of the available sizes, if it doesn't, set it
-   * to small by default.
-   */
-  switch (size) {
-    case small:
-    case 'small':
-      size = small; break;
-    case medium:
-    case 'medium':
-      size = medium; break;
-    case large:
-    case 'large':
-      size = large; break;
-    default:
-      size = small;
-  }
+  size = size || small;
+
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
 
   /**
    * Set up a debounce timeout to only perform the search query every x
@@ -52,7 +43,6 @@ export default memo(({ size, disabled, value, placeholder, loading, minLength =
    * @returns {void}
    */
   const handleClear = () => {
-    console.log('hi');
     return setQuery('');
   };
 
@@ -78,10 +68,12 @@ export default memo(({ size, disabled, value, placeholder, loading, minLength =
     <div className={joinClassNames(container, size, className, { [_disabled]: disabled })} {...other}>
       <div className={inner}>
         <input
+          autoFocus={autoFocus}
           className={joinClassNames(input, inputClassName)}
           onChange={handleOnChange}
           value={query}
           placeholder={placeholder || Messages.SEARCH}
+          ref={inputRef}
         />
         <div className={joinClassNames(iconLayout, size, { [pointer]: query?.length })} tabindex={query?.length ? '0' : '-1'} role='button'>
           <div className={iconContainer} onClick={() => query?.length && handleClear()}>