[EuiComboBox] Fix rowHeight and singleSelection focus issues

CHANGELOG.md

@@ -3,6 +3,11 @@
 - Improved contrast for `EuiIcon` and `EuiButtonIcon` named colors. This affects `EuiHealth` which uses the `EuiIcon` colors. ([#4049](https://github.com/elastic/eui/pull/4049))
 - Added color `accent` to `EuiButtonIcon` ([#4049](https://github.com/elastic/eui/pull/4049))
 
+**Bug fixes**
+
+- Fixed `EuiComboBox` `rowHeight` prop causing the height of the option list to be miscalculated ([#4072](https://github.com/elastic/eui/pull/4072))
+- Fixed `EuiComboBox` not focusing on the selected option if `selectedOptions` was set without reference to `options` ([#4072](https://github.com/elastic/eui/pull/4072))
+
 **Theme: Amsterdam**
 
 - Removed `border-radius` from `EuiCallout` ([#4066](https://github.com/elastic/eui/pull/4066))

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

@@ -317,7 +317,7 @@ exports[`props options list is rendered 1`] = `
       class="euiComboBoxOptionsList__rowWrap"
     >
       <div
-        style="position: relative; height: 203px; width: 0px; overflow: auto; direction: ltr;"
+        style="position: relative; height: 200px; width: 0px; overflow: auto; direction: ltr;"
       >
         <div
           id="htmlid_listbox"

src/components/combo_box/combo_box.tsx

@@ -365,6 +365,21 @@ export class EuiComboBox<T> extends Component<
     });
   };
 
+  focusSelectedOption = () => {
+    // If singleSelection is on and an option has been selected, set that option as active
+    if (
+      Boolean(this.props.singleSelection) &&
+      this.props.selectedOptions.length === 1
+    ) {
+      const selectedOptionIndex = this.state.matchingOptions.findIndex(
+        option => option.label === this.props.selectedOptions[0].label
+      );
+      this.setState({
+        activeOptionIndex: selectedOptionIndex,
+      });
+    }
+  };
+
   incrementActiveOptionIndex = (amount: number) => {
     // If there are no options available, do nothing.
     if (!this.state.matchingOptions.length) {
@@ -530,6 +545,7 @@ export class EuiComboBox<T> extends Component<
     }
 
     this.openList();
+    this.focusSelectedOption();
 
     this.setState({ hasFocus: true });
   };
@@ -595,6 +611,7 @@ export class EuiComboBox<T> extends Component<
           this.incrementActiveOptionIndex(-1);
         } else {
           this.openList();
+          this.focusSelectedOption();
         }
         break;
 
@@ -605,6 +622,7 @@ export class EuiComboBox<T> extends Component<
           this.incrementActiveOptionIndex(1);
         } else {
           this.openList();
+          this.focusSelectedOption();
         }
         break;
 
@@ -726,16 +744,7 @@ export class EuiComboBox<T> extends Component<
     }
 
     // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
-    if (
-      Boolean(this.props.singleSelection) &&
-      this.props.selectedOptions.length === 1
-    ) {
-      this.setState({
-        activeOptionIndex: this.state.matchingOptions.indexOf(
-          this.props.selectedOptions[0]
-        ),
-      });
-    } else {
+    if (!Boolean(this.props.singleSelection)) {
       this.clearActiveOption();
     }
   };

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -450,9 +450,12 @@ export class EuiComboBoxOptionsList<T> extends Component<
       matchingOptions.length < 7 ? matchingOptions.length : 7;
     const height = numVisibleOptions * rowHeight;
 
+    // bounded by max-height of euiComboBoxOptionsList__rowWrap
+    const boundedHeight = height > 200 ? 200 : height;
+
     const optionsList = (
       <FixedSizeList
-        height={height}
+        height={boundedHeight}
         onScroll={onScroll}
         itemCount={matchingOptions.length}
         itemSize={rowHeight}