From bde48309c77699b5187eb2650b8e07c2ff43e13f Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 11 Oct 2023 11:51:08 -0700 Subject: [PATCH] feat: blur comboBox upon single selection --- src/components/combo_box/combo_box.tsx | 6 ++++-- .../combo_box/combo_box_input/combo_box_input.tsx | 4 +--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index acd7ec2d70c..8d196019956 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -457,6 +457,8 @@ export class EuiComboBox extends Component< this.comboBoxRefInstance && this.comboBoxRefInstance.contains(relatedTarget); + const singleSelection = Boolean(this.props.singleSelection); + if (!focusedInOptionsList && !focusedInInput) { this.props.onBlur?.(event); this.closeList(); @@ -467,7 +469,7 @@ export class EuiComboBox extends Component< if (!this.hasActiveOption()) { this.setCustomOptions(true); } - } else if (focusedInOptionsList) { + } else if (focusedInOptionsList && !singleSelection) { // https://github.com/elastic/eui/issues/5179 // need to restore focus to the input box when clicking non-interactive elements @@ -567,7 +569,7 @@ export class EuiComboBox extends Component< this.clearSearchValue(); this.clearActiveOption(); - if (!isContainerBlur) { + if (!isContainerBlur && !singleSelection) { this.searchInputRefInstance?.focus(); } diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx index 004112c7e8e..15fba71d5c8 100644 --- a/src/components/combo_box/combo_box_input/combo_box_input.tsx +++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx @@ -175,9 +175,7 @@ export class EuiComboBoxInput extends Component< const singleSelection = Boolean(singleSelectionProp); const asPlainText = - (singleSelectionProp && - typeof singleSelectionProp === 'object' && - singleSelectionProp.asPlainText) || + (singleSelectionProp as EuiComboBoxSingleSelectionShape).asPlainText ?? false; const pills = selectedOptions