fix(ui5-multi-combobox): fix initial focus on mobile (#1508)

SAP · Apr 23, 2020 · 77e6ab6 · 77e6ab6
1 parent 71a25ad
commit 77e6ab6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -485,6 +485,15 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_setInitialFocusInResponsivePopover() {
+		this._innerInput.focus();
+	}
+
+	_onAllItemsPopoverAfterOpen() {
+		this._setInitialFocusInResponsivePopover();
+		this._toggleIcon();
+	}
+
 	_getSelectedItems() {
 		// Angular 2 way data binding
 		this.selectedValues = this.items.filter(item => item.selected);

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -7,6 +7,7 @@
 	_disable-initial-focus
 	content-only-on-desktop
 	@ui5-afterClose={{_afterClosePopover}}
+	@ui5-afterOpen={{_setInitialFocusInResponsivePopover}}
 >
 	<div slot="header" class="ui5-responsive-popover-header">
 		<div class="row">
@@ -75,7 +76,7 @@
 	content-only-on-desktop
 	@ui5-selectionChange={{_listSelectionChange}}
 	@ui5-afterClose={{_toggleIcon}}
-	@ui5-afterOpen={{_toggleIcon}}
+	@ui5-afterOpen={{_onAllItemsPopoverAfterOpen}}
 >
 	<div slot="header" class="ui5-responsive-popover-header">
 		<div class="row">