Added auto focus for input field (#143)

Author: skuengneo

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Support for `autoFocus` for `input` fields
+
 ### Changed
 
 - move cypress declarations into type file

cypress/cypress/component/Input/BasicInputField.cy.tsx

@@ -476,4 +476,20 @@ it("minlenght and maxlenght work", () => {
   cy.get(`input[name=${name}]`).clear();
   cy.get(`input[name=${name}]`).type(invalidInput);
   cy.get(`input[name=${name}]`).should("have.value", invalidInput.slice(0, maxLength));
+
+  it("is auto focused", () => {
+    const name = faker.random.word();
+
+    cy.mount(
+      <Form
+        onSubmit={() => {
+          // Do nothing
+        }}
+      >
+        <Input name={name} label={name} autoFocus={true} />
+      </Form>,
+    );
+
+    cy.get(`input[name=${name}]`).should("be.focused");
+  });
 });

src/lib/Input.tsx

@@ -24,6 +24,7 @@ interface InputProps<T extends FieldValues> extends CommonInputProps<T> {
   step?: number;
   autoComplete?: string;
   innerRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
+  autoFocus?: boolean;
 }
 
 // eslint-disable-next-line complexity

src/lib/components/Input/InputInternal.tsx

@@ -31,6 +31,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
     minLength,
     maxLength,
     autoComplete,
+    autoFocus,
   } = props;
   const { name, id } = useSafeNameId(props.name, props.id);
   const focusHandler = useMarkOnFocusHandler(markAllOnFocus);
@@ -74,6 +75,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
         placeholder={placeholder}
         step={step}
         autoComplete={autoComplete}
+        autoFocus={autoFocus}
         {...rest}
         {...(value ? { value } : {})}
         onBlur={(e) => {