fix(ui5-combobox): Close popup on focusout (#2013)

Now the popup closes on focusout, except the case when the focusout is due to focusin of the items FIXES: #2009
SAP · Jul 27, 2020 · 2c95be4 · 2c95be4
1 parent 77cabba
commit 2c95be4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -323,6 +323,7 @@ class ComboBox extends UI5Element {
 
 		this._filteredItems = [];
 		this._initialRendering = true;
+		this._itemFocused = false;
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
@@ -356,6 +357,16 @@ class ComboBox extends UI5Element {
 			// Set initial focus to the native input
 			this.inner.focus();
 		}
+
+		if (this.shouldClosePopover()) {
+			this.responsivePopover.close(false, false, true);
+		}
+
+		this._itemFocused = false;
+	}
+
+	shouldClosePopover() {
+		return this.responsivePopover.opened && !this.focused && !this._itemFocused;
 	}
 
 	_focusin(event) {
@@ -508,6 +519,10 @@ class ComboBox extends UI5Element {
 		this._inputChange();
 	}
 
+	_onItemFocus(event) {
+		this._itemFocused = true;
+	}
+
 	get _headerTitleText() {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}

diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -49,6 +49,7 @@
 	<ui5-list
 		separators="None"
 		@ui5-item-click={{_selectItem}}
+		@ui5-item-focused={{_onItemFocus}}
 		mode="SingleSelect"
 	>
 		{{#each _filteredItems}}