fix(Form): Added autoFocus prop on the components used as form fields (…

…#784)

* fix(Form): Added autoFocus prop on the components used as form fields

* Update src/components/Form/Form.stories.tsx

Co-authored-by: Demetrio Marino <[email protected]>

---------

Co-authored-by: Guido Zoli <[email protected]>
Co-authored-by: Federico Maggi <[email protected]>
Co-authored-by: Demetrio Marino <[email protected]>

src/components/BaseInput/props.ts

@@ -45,4 +45,9 @@ export type BaseInputProps = {
    */
   className?: string
 
+  /**
+   * autofocus property of the HTMLElement
+   */
+  autoFocus?: boolean
+
 }

src/components/Checkbox/Checkbox.tsx

@@ -43,6 +43,7 @@ export const Checkbox = <T = never, >({
   value,
   children = label,
   className: classNameProp,
+  autoFocus,
 }: CheckboxProps<T>): ReactElement => {
   const className = useMemo(() => classnames([
     styles.checkbox,
@@ -51,6 +52,7 @@ export const Checkbox = <T = never, >({
 
   return (
     <AntCheckbox
+      autoFocus={autoFocus}
       className={className}
       defaultChecked={isInitiallyChecked}
       disabled={isDisabled}

src/components/Checkbox/props.ts

@@ -72,4 +72,9 @@ export type CheckboxProps<T = never, > = {
   children?: ReactNode
 
   className?: string
+
+  /**
+   * autofocus property of the HTMLElement
+   */
+  autoFocus?: boolean
 }

src/components/Input/Input.tsx

@@ -87,6 +87,7 @@ export const Input = (
     onChange,
     placeholder,
     iconLeft,
+    autoFocus,
     iconRight,
     allowClear,
     maxLength,
@@ -165,6 +166,7 @@ export const Input = (
       addonBefore={addonBefore}
       allowClear={allowClear}
       appearance={appearance}
+      autoFocus={autoFocus}
       className={styles.input}
       component={AntInput}
       defaultValue={inputDefaultValue}

src/components/InputNumber/InputNumber.tsx

@@ -51,10 +51,12 @@ export const InputNumber = (
     max,
     step,
     precision,
+    autoFocus,
   }: InputNumberProps) : ReactElement => {
   return (
     <BaseInput
       appearance={appearance}
+      autoFocus={autoFocus}
       className={styles.inputNumber}
       component={AntInputNumber}
       defaultValue={defaultValue}

src/components/Search/Search.tsx

@@ -61,13 +61,15 @@ export const Search = <ValueType, >(
     inputRef,
     iconLeft,
     iconRight = defaults.iconRight,
+    autoFocus,
     onChange,
     onSelect,
     onSearch,
   }: SearchProps<ValueType>) : ReactElement => {
   return (
     <BaseInput <AntAutoCompleteProps<ValueType, SearchItem<ValueType>>>
       appearance={appearance}
+      autoFocus={autoFocus}
       className={styles.search}
       component={AntAutoComplete}
       defaultValue={defaultValue}

src/components/Select/Select.tsx

@@ -70,6 +70,7 @@ export const Select = <ValueType, >(
     allowClear,
     options,
     inputRef,
+    autoFocus,
     onChange,
     onClear,
     onSelect,
@@ -93,6 +94,7 @@ export const Select = <ValueType, >(
     <BaseInput <AntSelectProps<ValueType, SelectItem<ValueType>>>
       allowClear={allowClear}
       appearance={appearance}
+      autoFocus={autoFocus}
       className={className}
       component={AntSelect}
       defaultValue={defaultValue}

src/components/TextArea/TextArea.tsx

@@ -50,11 +50,13 @@ export const TextArea = (
     minLength,
     maxLength,
     rows,
+    autoFocus,
   }: TextAreaProps) : ReactElement => {
   return (
     <BaseInput
       allowClear={allowClear}
       appearance={appearance}
+      autoFocus={autoFocus}
       component={AntInput.TextArea}
       defaultValue={defaultValue}
       id={id}