From 22ce7120a70f863bf35e0a35521465976ddd2d01 Mon Sep 17 00:00:00 2001
From: wenchong <18256786+wenchonglee@users.noreply.github.com>
Date: Thu, 1 Oct 2020 11:11:44 +0800
Subject: [PATCH] [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 6b993adfa9cf46384124584387d2e924cb754d39.
---
 CHANGELOG.md                                               | 5 +++++
 .../combo_box/__snapshots__/combo_box.test.tsx.snap        | 2 +-
 src/components/combo_box/combo_box.tsx                     | 7 ++++---
 .../combo_box_options_list/combo_box_options_list.tsx      | 5 ++++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4957e66fed9..e1e95fe5311 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index a4ab0827043..255d1c85d47 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/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"
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 79717a18173..072a625bfd4 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/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();
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index 301f502d216..0457bc3b133 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/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}