[EuiComboBox] Fix rowHeight and singleSelection focus issues (#4072)

* Fixed EuiComboBox rowHeight causing height to go over max-height

* Fixed EuiComboBox not focusing on the selected option

* Added changelog entry

* Added conditions to focus on selected option other than clicking on the input

* Revert "Added conditions to focus on selected option other than clicking on the input"

This reverts commit 6b993ad.

CHANGELOG.md

@@ -21,6 +21,11 @@ No public interface changes since `29.3.0`.
 - 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

@@ -730,10 +730,11 @@ export class EuiComboBox<T> extends Component<
  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: this.state.matchingOptions.indexOf(
- this.props.selectedOptions[0]
- ),
+ activeOptionIndex: selectedOptionIndex,
  });
  } else {
  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}