fix(ui5-combobox): component improvements (#1141)

Author: MapTo0

packages/main/src/ComboBox.hbs

@@ -4,34 +4,6 @@
 	aria-expanded="{{open}}"
 >
 
-	<input id="ui5-combobox-input"
-		.value="{{_tempValue}}"
-		inner-input
-		placeholder="{{placeholder}}"
-		?disabled={{disabled}}
-		?readonly={{readonly}}
-		?required={{required}}
-		value-state="{{valueState}}"
-		@input="{{_input}}"
-		@change="{{_inputChange}}"
-		@keydown="{{_keydown}}"
-		@focusin="{{_focusin}}"
-		@focusout="{{_focusout}}"
-		aria-autocomplete="both"
-	/>
-
-	{{#unless readonly}}
-		<ui5-icon
-			name="slim-arrow-down"
-			slot="icon"
-			tabindex="-1"
-			input-icon
-			?pressed="{{_iconPressed}}"
-			@click="{{_arrowClick}}"
-			dir="{{dir}}"
-		></ui5-icon>
-	{{/unless}}
-
 	<ui5-popover
 		class="ui5-combobox-popover"
 		style={{styles.popover}}
@@ -40,6 +12,7 @@
 		no-padding="true"
 		placement-type="Bottom"
 		initial-focus="ui5-combobox-input"
+		tabindex="-1"
 		@ui5-afterOpen={{_afterOpenPopover}}
 		@ui5-afterClose={{_afterClosePopover}}
 	>
@@ -68,4 +41,31 @@
 		</ui5-list>
 	</ui5-popover>
 
+	<input id="ui5-combobox-input"
+		.value="{{_tempValue}}"
+		inner-input
+		placeholder="{{placeholder}}"
+		?disabled={{disabled}}
+		?readonly={{readonly}}
+		?required={{required}}
+		value-state="{{valueState}}"
+		@input="{{_input}}"
+		@change="{{_inputChange}}"
+		@keydown="{{_keydown}}"
+		@focusin="{{_focusin}}"
+		@focusout="{{_focusout}}"
+		aria-autocomplete="both"
+	/>
+
+	{{#unless readonly}}
+		<ui5-icon
+			name="slim-arrow-down"
+			slot="icon"
+			tabindex="-1"
+			input-icon
+			?pressed="{{_iconPressed}}"
+			@click="{{_arrowClick}}"
+			dir="{{dir}}"
+		></ui5-icon>
+	{{/unless}}
 </div>

packages/main/src/ComboBox.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
 import { isBackSpace, isDelete, isShow } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import * as Filters from "./ComboBoxFilters.js";
 
@@ -11,6 +12,8 @@ import ComboBoxItem from "./ComboBoxItem.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import List from "./List.js";
+import BusyIndicator from "./BusyIndicator.js";
+import StandardListItem from "./StandardListItem.js";
 
 const metadata = {
 	tag: "ui5-combobox",
@@ -253,19 +256,35 @@ class ComboBox extends UI5Element {
 
 		this._filteredItems = [];
 		this._initialRendering = true;
+
+		this.addEventListener("focusout", () => {
+			if (this.popover) {
+				this.popover.close();
+			}
+		});
 	}
 
 	onBeforeRendering() {
 		const domValue = this._initialRendering ? this.value : this.filterValue;
 
 		this._filteredItems = this._filterItems(domValue);
 
+		// prevent popover focus restore
+		// TODO: fix that once popovers are fixed to static area
+		if (this.popover) {
+			this.popover._prevetFocusRestore = true;
+		}
+
 		if (this._autocomplete && domValue !== "") {
 			this._autoCompleteValue(domValue);
 		} else {
 			this._tempValue = domValue;
 		}
 
+		if (this.popover && document.activeElement === this && !this._filteredItems.length) {
+			this.popover.close();
+		}
+
 		this._selectMatchingItem();
 		this._initialRendering = false;
 	}
@@ -358,7 +377,7 @@ class ComboBox extends UI5Element {
 			this._tempValue = current;
 		}
 
-		if (matchingItems.length) {
+		if (matchingItems.length && (currentValue !== this._tempValue)) {
 			setTimeout(() => {
 				this.inner.setSelectionRange(currentValue.length, this._tempValue.length);
 			}, 0);
@@ -428,6 +447,8 @@ class ComboBox extends UI5Element {
 			Icon.define(),
 			Popover.define(),
 			List.define(),
+			BusyIndicator.define(),
+			StandardListItem.define(),
 		]);
 
 		super.define(...params);

packages/main/src/Popover.js

@@ -343,7 +343,9 @@ class Popover extends UI5Element {
 			removeOpenedPopover(this);
 		}
 
-		this.resetFocus();
+		if (!this._prevetFocusRestore) {
+			this.resetFocus();
+		}
 
 		this.hide();
 		this.fireEvent("afterClose", {});