From 6bf2c6227c8c8c0276ff196fe1ee9db694fda18d Mon Sep 17 00:00:00 2001 From: wenchong <18256786+wenchonglee@users.noreply.github.com> Date: Thu, 24 Sep 2020 11:07:34 +0800 Subject: [PATCH 1/5] Fixed EuiComboBox rowHeight causing height to go over max-height --- .../combo_box/__snapshots__/combo_box.test.tsx.snap | 2 +- .../combo_box_options_list/combo_box_options_list.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) 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" >
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 = ( Date: Thu, 24 Sep 2020 11:16:08 +0800 Subject: [PATCH 2/5] Fixed EuiComboBox not focusing on the selected option --- src/components/combo_box/combo_box.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 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(); From 8c9e09c997dcbf196b3b62bf5ac3faa61389330e Mon Sep 17 00:00:00 2001 From: wenchong <18256786+wenchonglee@users.noreply.github.com> Date: Tue, 29 Sep 2020 21:51:21 +0800 Subject: [PATCH 3/5] Added changelog entry --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 270538399ab..6d4b39ccbc4 100644 --- a/CHANGELOG.md +++ b/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)) From 6b993adfa9cf46384124584387d2e924cb754d39 Mon Sep 17 00:00:00 2001 From: wenchong <18256786+wenchonglee@users.noreply.github.com> Date: Wed, 30 Sep 2020 00:36:06 +0800 Subject: [PATCH 4/5] Added conditions to focus on selected option other than clicking on the input --- src/components/combo_box/combo_box.tsx | 30 ++++++++++++++++---------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 072a625bfd4..da5228c95f0 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -365,6 +365,21 @@ export class EuiComboBox 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 extends Component< } this.openList(); + this.focusSelectedOption(); this.setState({ hasFocus: true }); }; @@ -595,6 +611,7 @@ export class EuiComboBox extends Component< this.incrementActiveOptionIndex(-1); } else { this.openList(); + this.focusSelectedOption(); } break; @@ -605,6 +622,7 @@ export class EuiComboBox extends Component< this.incrementActiveOptionIndex(1); } else { this.openList(); + this.focusSelectedOption(); } break; @@ -726,17 +744,7 @@ export class EuiComboBox 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 - ) { - const selectedOptionIndex = this.state.matchingOptions.findIndex( - option => option.label === this.props.selectedOptions[0].label - ); - this.setState({ - activeOptionIndex: selectedOptionIndex, - }); - } else { + if (!Boolean(this.props.singleSelection)) { this.clearActiveOption(); } }; From 1f43cf2c7a985fcc8647fbb18bedd5963433ecd3 Mon Sep 17 00:00:00 2001 From: wenchong <18256786+wenchonglee@users.noreply.github.com> Date: Thu, 1 Oct 2020 09:42:47 +0800 Subject: [PATCH 5/5] Revert "Added conditions to focus on selected option other than clicking on the input" This reverts commit 6b993adfa9cf46384124584387d2e924cb754d39. --- src/components/combo_box/combo_box.tsx | 30 ++++++++++---------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index da5228c95f0..072a625bfd4 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -365,21 +365,6 @@ export class EuiComboBox 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) { @@ -545,7 +530,6 @@ export class EuiComboBox extends Component< } this.openList(); - this.focusSelectedOption(); this.setState({ hasFocus: true }); }; @@ -611,7 +595,6 @@ export class EuiComboBox extends Component< this.incrementActiveOptionIndex(-1); } else { this.openList(); - this.focusSelectedOption(); } break; @@ -622,7 +605,6 @@ export class EuiComboBox extends Component< this.incrementActiveOptionIndex(1); } else { this.openList(); - this.focusSelectedOption(); } break; @@ -744,7 +726,17 @@ export class EuiComboBox 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)) { + 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, + }); + } else { this.clearActiveOption(); } };