[EuiComboBox] autoFocus behavior (#4772)

* add autoFocus

* revert me

* CL

* Apply suggestions from code review

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `autoFocus` prop and functionality to `EuiComboBox` ([#4772](https://github.com/elastic/eui/pull/4772))
+
 **Bug fixes**
 
 - Fixed `initialFocus` prop functionality in `EuiPopover` ([#4768](https://github.com/elastic/eui/pull/4768))

src-docs/src/views/combo_box/combo_box.js

@@ -81,6 +81,7 @@ export default () => {
         onCreateOption={onCreateOption}
         isClearable={true}
         data-test-subj="demoComboBox"
+        autoFocus
       />
     </DisplayToggles>
   );

src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

@@ -57,6 +57,49 @@ exports[`EuiComboBox is rendered 1`] = `
 </div>
 `;
 
+exports[`props autoFocus is rendered 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    fullWidth={false}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isListOpen={false}
+    noIcon={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onCloseListClick={[Function]}
+    onFocus={[Function]}
+    onOpenListClick={[Function]}
+    onRemoveOption={[Function]}
+    rootId={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+        Object {
+          "label": "Dione",
+        },
+      ]
+    }
+    singleSelection={false}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas, Dione"
+  />
+</div>
+`;
+
 exports[`props delimiter is rendered 1`] = `
 <div
   aria-expanded={false}

src/components/combo_box/combo_box.test.tsx

@@ -199,6 +199,17 @@ describe('props', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  test('autoFocus is rendered', () => {
+    const component = shallow(
+      <EuiComboBox
+        options={options}
+        selectedOptions={[options[2], options[3]]}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });
 
 test('does not show multiple checkmarks with duplicate labels', () => {

src/components/combo_box/combo_box.tsx

@@ -149,6 +149,10 @@ export interface _EuiComboBoxProps<T>
    * A special character to use as a value separator. Typically a comma `,`
    */
   delimiter?: string;
+  /**
+   * Specifies that the input should have focus when the component loads
+   */
+  autoFocus?: boolean;
 }
 
 /**
@@ -930,6 +934,7 @@ export class EuiComboBox<T> extends Component<
       sortMatchesBy,
       delimiter,
       append,
+      autoFocus,
       ...rest
     } = this.props;
     const {
@@ -1060,6 +1065,7 @@ export class EuiComboBox<T> extends Component<
           append={singleSelection ? append : undefined}
           prepend={singleSelection ? prepend : undefined}
           isLoading={isLoading}
+          autoFocus={autoFocus}
         />
         {optionsList}
       </div>

src/components/combo_box/combo_box_input/combo_box_input.tsx

@@ -72,6 +72,7 @@ export interface EuiComboBoxInputProps<T> extends CommonProps {
   prepend?: EuiFormControlLayoutProps['prepend'];
   append?: EuiFormControlLayoutProps['append'];
   isLoading?: boolean;
+  autoFocus?: boolean;
 }
 
 interface EuiComboBoxInputState {
@@ -159,6 +160,7 @@ export class EuiComboBoxInput<T> extends Component<
       prepend,
       append,
       isLoading,
+      autoFocus,
     } = this.props;
 
     const singleSelection = Boolean(singleSelectionProp);
@@ -300,6 +302,7 @@ export class EuiComboBoxInput<T> extends Component<
             role="textbox"
             style={{ fontSize: 14 }}
             value={searchValue}
+            autoFocus={autoFocus}
           />
           {removeOptionMessage}
         </div>