Autofocus support in InputBoxWrapper (#1340)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Author: dvaldivia

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);
                     }}

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}

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);

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);
                 }}

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);
                   }}