From b40ec520ae3fd1abe4612eca35e9a138fa31eeaa Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Thu, 23 Dec 2021 09:10:10 -0800
Subject: [PATCH] Autofocus support in InputBoxWrapper (#1340)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../src/screens/Console/Buckets/ListBuckets/AddBucket.tsx      | 1 +
 .../Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx  | 3 +++
 portal-ui/src/screens/Console/Groups/AddGroup.tsx              | 1 +
 portal-ui/src/screens/Console/Policies/AddPolicy.tsx           | 1 +
 portal-ui/src/screens/Console/Users/AddUser.tsx                | 1 +
 5 files changed, 7 insertions(+)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index 4e4e34cd9..f86a7f416 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -290,6 +290,7 @@ const AddBucket = ({
                   <InputBoxWrapper
                     id="bucket-name"
                     name="bucket-name"
+                    autoFocus={true}
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                       addBucketName(event.target.value);
                     }}
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
index bc20ca925..bba8d571c 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
@@ -59,6 +59,7 @@ interface InputBoxProps {
   extraInputProps?: StandardInputProps["inputProps"];
   noLabelMinWidth?: boolean;
   pattern?: string;
+  autoFocus?: boolean;
 }
 
 const styles = (theme: Theme) =>
@@ -123,6 +124,7 @@ const InputBoxWrapper = ({
   overlayAction,
   noLabelMinWidth = false,
   pattern = "",
+  autoFocus = false,
   classes,
 }: InputBoxProps) => {
   let inputProps: any = { "data-index": index, ...extraInputProps };
@@ -176,6 +178,7 @@ const InputBoxWrapper = ({
             name={name}
             fullWidth
             value={value}
+            autoFocus={autoFocus}
             disabled={disabled}
             onChange={onChange}
             type={type}
diff --git a/portal-ui/src/screens/Console/Groups/AddGroup.tsx b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
index a76c91f34..aef9d98b2 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -206,6 +206,7 @@ const AddGroup = ({
                   id="group-name"
                   name="group-name"
                   label="Group Name"
+                  autoFocus={true}
                   value={groupName}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     setGroupName(e.target.value);
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
index b1658f4c1..a2f0350eb 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
@@ -137,6 +137,7 @@ const AddPolicy = ({
                 name="policy-name"
                 label="Policy Name"
                 placeholder="Enter Policy Name"
+                autoFocus={true}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   setPolicyName(e.target.value);
                 }}
diff --git a/portal-ui/src/screens/Console/Users/AddUser.tsx b/portal-ui/src/screens/Console/Users/AddUser.tsx
index 002e2d0a7..9b1f19f4f 100644
--- a/portal-ui/src/screens/Console/Users/AddUser.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUser.tsx
@@ -212,6 +212,7 @@ const AddUser = ({
                   name="accesskey-input"
                   label="Access Key"
                   value={accessKey}
+                  autoFocus={true}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     setAccessKey(e.target.value);
                   }}