Merge remote-tracking branch 'origin/master' into cosy-compact-refactoring

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", {});

packages/main/src/themes/ListItem.css

@@ -101,7 +101,9 @@
 
 .ui5-li-img {
 	width: var(--_ui5_list_item_img_size);
+	min-width: var(--_ui5_list_item_img_size);
 	height: var(--_ui5_list_item_img_size);
+	min-height: var(--_ui5_list_item_img_size);
 	margin: var(--_ui5_list_item_img_margin);
 }
 
@@ -127,6 +129,11 @@
 	align-items: center;
 }
 
+.ui5-li-multisel-cb,
+.ui5-li-singlesel-radiobtn {
+	flex-shrink: 0;
+}
+
 :host() ui5-checkbox.ui5-li-singlesel-radiobtn {
 	margin-right: var(--_ui5_list_item_cb_margin_right);
 }

packages/main/src/themes/ListItemBase.css

@@ -56,6 +56,10 @@
 	pointer-events: none;
 }
 
+:host([active][focused]) .ui5-li-root.ui5-li--focusable:after {
+	border-color: var(--sapContent_ContrastFocusColor);
+}
+
 .ui5-li-content {
 	max-width: 100%;
 	min-height: 1px; /* IE specific: fixes vertical centering with flex  */

packages/main/test/pages/List.html

@@ -17,7 +17,7 @@ <h2>ui5-list</h2>
 
 	<ui5-list header-text="API: GroupHeaderListItem" mode="MultiSelect">
 		<ui5-li-groupheader>New Items</ui5-li-groupheader>
-		<ui5-li image="./img/HT-1000.jpg" icon="navigation-right-arrow" info="Available">Laptop HP</ui5-li>
+		<ui5-li image="./img/HT-1000.jpg" icon="navigation-right-arrow" info="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
 		<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
 		<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131"  info-state="Error">IPhone 3</ui5-li>
 
@@ -86,7 +86,7 @@ <h2>ui5-list</h2>
 	<br/><br/>
 
 	<ui5-list id="myList3" mode="SingleSelectBegin" header-text="API: mode='SingleSelectBegin'">
-		<ui5-li id="country1" >Argentina</ui5-li>
+		<ui5-li id="country1" >Dolor dolor ipsum culpa proident esse quis quis incididunt. Sunt duis eu ad deserunt dolor sunt Lorem incididunt est irure qui dolore minim consectetur. Voluptate minim veniam aliqua aute et consectetur magna commodo sit. Duis fugiat esse culpa ea velit sit excepteur duis deserunt aliquip minim laborum. Amet aliquip excepteur esse aute ut dolore labore.</ui5-li>
 		<ui5-li id="country2"  selected>Bulgaria</ui5-li>
 		<ui5-li id="country3" >China</ui5-li>
 	</ui5-list>