Update Select component to accept autoFocus & name props for react-select wrapper (#1586)

* Code-style & Import sorter fixes

* Add autofocus prop to proptypes and pass to react-select both autofocus & name

* Update react-select snapshot changes

Author: cristiandouce

core/components/atoms/select/select.tsx

@@ -1,25 +1,26 @@
-import * as React from 'react'
-import Automation from '../../_helpers/automation-attribute'
-import styled from '../../styled'
-import ReactSelect, { defaultTheme, components } from 'react-select'
-import AsyncSelect from 'react-select/lib/Async'
-import { misc, colors, spacing } from '../../tokens'
-import SimpleSelect from '../_simple-select'
-import Form from '../../molecules/form'
+import * as React from "react";
+import ReactSelect, { components, defaultTheme } from "react-select";
+import AsyncSelect from "react-select/lib/Async";
+
+import Automation from "../../_helpers/automation-attribute";
+import Form from "../../molecules/form";
+import styled from "../../styled";
+import { colors, misc, spacing } from "../../tokens";
+import SimpleSelect from "../_simple-select";
 import {
+  ClearIndicator,
+  DropdownIndicator,
+  Group,
   GroupHeading,
+  LoadingIndicator,
   Menu,
   MenuList,
-  Option,
-  LoadingIndicator,
-  DropdownIndicator,
-  ClearIndicator,
   MultiValue,
-  Group,
+  Option,
   optionRenderer,
   valueRenderer
-} from './components'
-import { ISelectOptions } from './interfaces';
+} from "./components";
+import { ISelectOptions } from "./interfaces";
 
 const defaultGetOptionValue = option => option.value
 
@@ -80,17 +81,17 @@ const cosmosToReactSelect = {
     control: (provided, state) =>
       props.hasError
         ? {
-          ...provided,
-          borderColor: colors.input.borderError,
-          boxShadow: `0 0 0 ${state.isFocused ? 1 : 0}px ${colors.input.borderError}`,
-          '&:hover': {
-            borderColor: colors.input.borderError
-          },
-          '&:focus': {
+            ...provided,
             borderColor: colors.input.borderError,
-            boxShadow: `0 0 0 2px ${colors.input.borderError}`
+            boxShadow: `0 0 0 ${state.isFocused ? 1 : 0}px ${colors.input.borderError}`,
+            '&:hover': {
+              borderColor: colors.input.borderError
+            },
+            '&:focus': {
+              borderColor: colors.input.borderError,
+              boxShadow: `0 0 0 2px ${colors.input.borderError}`
+            }
           }
-        }
         : provided
   })
 }
@@ -145,8 +146,10 @@ export interface ISelectProps {
   defaultOptions?: Object[] | boolean
   /** Used to provide custom styled to the Select wrapper */
   style?: Object
+  /** Used to focus the control when it mounts */
+  autoFocus?: boolean
   /** @internal */
-  defaultMenuOpen?: boolean,
+  defaultMenuOpen?: boolean
   inputValue?: string
 }
 
@@ -291,6 +294,8 @@ class Select extends React.Component<ISelectProps, ISelectState> {
               noOptionsMessage={noOptionsMessage}
               defaultOptions={defaultOptions}
               theme={selectTheme}
+              autoFocus={props.autoFocus}
+              name={props.name}
               value={value}
               styles={styles}
               key={value ? value.length : 0}

internal/test/unit/__snapshots__/select.test.tsx.snap

@@ -6,16 +6,16 @@ exports[`Select async variant renders ReactSelect 1`] = `
   data-cosmos-key="select.wrapper"
 >
   <div
-    class="css-10nd86i"
+    class="css-1pcexqc-container"
   >
     <div
-      class="css-1dhouxp"
+      class="css-xorvj4-control"
     >
       <div
         class="css-1hwfws3"
       >
         <div
-          class="css-1492t68"
+          class="css-151xaom-placeholder"
         >
           Something
         </div>
@@ -33,7 +33,7 @@ exports[`Select async variant renders ReactSelect 1`] = `
               autocorrect="off"
               id="react-select-5-input"
               spellcheck="false"
-              style="box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit"
+              style="box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit"
               tabindex="0"
               type="text"
               value=""
@@ -79,21 +79,21 @@ exports[`Select customOptionRenderer variant renders ReactSelect 1`] = `
   data-cosmos-key="select.wrapper"
 >
   <div
-    class="css-10nd86i"
+    class="css-1pcexqc-container"
   >
     <div
-      class="css-1dhouxp"
+      class="css-xorvj4-control"
     >
       <div
         class="css-1hwfws3"
       >
         <div
-          class="css-1492t68"
+          class="css-151xaom-placeholder"
         >
           Something
         </div>
         <input
-          class="css-14uuagi"
+          class="css-gj7qu5-dummyInput"
           id="react-select-4-input"
           readonly=""
           tabindex="0"
@@ -135,21 +135,21 @@ exports[`Select multiple variant renders ReactSelect 1`] = `
   data-cosmos-key="select.wrapper"
 >
   <div
-    class="css-10nd86i"
+    class="css-1pcexqc-container"
   >
     <div
-      class="css-1dhouxp"
+      class="css-xorvj4-control"
     >
       <div
         class="css-1hwfws3"
       >
         <div
-          class="css-1492t68"
+          class="css-151xaom-placeholder"
         >
           Something
         </div>
         <input
-          class="css-14uuagi"
+          class="css-gj7qu5-dummyInput"
           id="react-select-2-input"
           readonly=""
           tabindex="0"
@@ -191,16 +191,16 @@ exports[`Select searchable variant renders ReactSelect 1`] = `
   data-cosmos-key="select.wrapper"
 >
   <div
-    class="css-10nd86i"
+    class="css-1pcexqc-container"
   >
     <div
-      class="css-1dhouxp"
+      class="css-xorvj4-control"
     >
       <div
         class="css-1hwfws3"
       >
         <div
-          class="css-1492t68"
+          class="css-151xaom-placeholder"
         >
           Something
         </div>
@@ -218,7 +218,7 @@ exports[`Select searchable variant renders ReactSelect 1`] = `
               autocorrect="off"
               id="react-select-3-input"
               spellcheck="false"
-              style="box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit"
+              style="box-sizing:content-box;width:1px;label:input;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit"
               tabindex="0"
               type="text"
               value=""