[EuiSuperSelect] Fix various focus state behaviors (#5097)

* If no initial value is passed, focus into the first option

- to allow for arrow key UX

* Account for the first option (or any/all options) potentially being disabled

* Fix form labels losing focus when selecting popover items

- by manually triggering the onFocus passed by EuiFormRow that determines the label's focus state

- onFocus and onBlur types are based off of ColorPicker

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `37.5.0`.
+**Bug fixes**
+
+- Fixed `EuiSuperSelect`'s focus keyboard behavior when no initial value is passed, and focus label behavior ([#5097](https://github.com/elastic/eui/pull/5097))
 
 ## [`37.5.0`](https://github.com/elastic/eui/tree/v37.5.0)
 

src/components/form/super_select/super_select.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { Component, FocusEvent } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../../common';
@@ -33,7 +33,7 @@ enum ShiftDirection {
 export type EuiSuperSelectProps<T extends string> = CommonProps &
   Omit<
     EuiSuperSelectControlProps<T>,
-    'onChange' | 'onClick' | 'options' | 'value'
+    'onChange' | 'onClick' | 'onFocus' | 'onBlur' | 'options' | 'value'
   > & {
     /**
      * Pass an array of options that must at least include:
@@ -54,6 +54,8 @@ export type EuiSuperSelectProps<T extends string> = CommonProps &
      * You must pass an `onChange` function to handle the update of the value
      */
     onChange?: (value: T) => void;
+    onFocus?: (event?: FocusEvent) => void;
+    onBlur?: (event?: FocusEvent) => void;
 
     /**
      * Change to `true` if you want horizontal lines between options.
@@ -136,6 +138,15 @@ export class EuiSuperSelect<T extends string> extends Component<
           } else {
             focusSelected();
           }
+        } else {
+          const firstFocusableOption = this.props.options.findIndex(
+            ({ disabled }) => disabled !== true
+          );
+          this.focusItemAt(firstFocusableOption);
+        }
+
+        if (this.props.onFocus) {
+          this.props.onFocus();
         }
       });
     };
@@ -147,12 +158,15 @@ export class EuiSuperSelect<T extends string> extends Component<
     this.setState({
       isPopoverOpen: false,
     });
+
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
   };
 
   itemClicked = (value: T) => {
-    this.setState({
-      isPopoverOpen: false,
-    });
+    this.closePopover();
+
     if (this.props.onChange) {
       this.props.onChange(value);
     }