feat(ui5-input): Support 'inactive' suggestions (#1921)

Now the Input suggestions can be from type="Inactive".
Note: the inactive items can't be selected neither with the mouse, nor with the keyboard.
Note: the inactive items produces empty string in the input field, when previewed with the UP/DOWN arrow keys, the same way as the group header item, as both are not selectable

Related to: #1919

Author: ilhan007

packages/main/src/Input.js

@@ -781,7 +781,13 @@ class Input extends UI5Element {
 
 	previewSuggestion(item) {
 		this.valueBeforeItemSelection = this.value;
-		this.value = item.group ? "" : item.textContent;
+
+		if (item.type === "Inactive" || item.group) {
+			this.value = "";
+		} else {
+			this.value = item.textContent;
+		}
+
 		this._announceSelectedItem();
 		this._previewItem = item;
 	}
@@ -903,10 +909,8 @@ class Input extends UI5Element {
 
 	onItemPreviewed(item) {
 		this.previewSuggestion(item);
-		const suggestionItem = this.getSuggestionByListItem(item);
-
 		this.fireEvent("suggestion-item-preview", {
-			item: suggestionItem,
+			item: this.getSuggestionByListItem(item),
 			targetRef: item,
 		});
 	}

packages/main/src/InputPopover.hbs

@@ -59,6 +59,7 @@
 						icon="{{this.icon}}"
 						description="{{this.description}}"
 						info="{{this.info}}"
+						type="{{this.type}}"
 						info-state="{{this.infoState}}"
 						@ui5-_item-press="{{ fnOnSuggestionItemPress }}"
 						data-ui5-key="{{key}}"

packages/main/src/SuggestionItem.js

@@ -3,6 +3,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import StandardListItem from "./StandardListItem.js";
 import GroupHeaderListItem from "./GroupHeaderListItem.js";
+import ListItemType from "./types/ListItemType.js";
 
 /**
  * @public
@@ -21,6 +22,23 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the visual indication and behavior of the item.
+		 * Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>.
+		 * <br><br>
+		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
+		 * while when <code>Inactive</code> or <code>Detail</code> - will not.
+		 *
+		 * @type {ListItemType}
+		 * @defaultvalue "Active"
+		 * @public
+		 * @since 1.0.0-rc.8
+		*/
+		type: {
+			type: ListItemType,
+			defaultValue: ListItemType.Active,
+		},
+
 		/**
 		 * Defines the description displayed right under the item text, if such is present.
 		 * @type {string}

packages/main/src/features/InputSuggestions.js

@@ -53,6 +53,7 @@ class Suggestions {
 				description: suggestion.description || undefined,
 				image: suggestion.image || undefined,
 				icon: suggestion.icon || undefined,
+				type: suggestion.type || undefined,
 				info: suggestion.info || undefined,
 				infoState: suggestion.infoState,
 				group: suggestion.group,
@@ -146,6 +147,12 @@ class Suggestions {
 			itemText: item.textContent,
 		};
 
+		// If the item is "Inactive", prevent selection with SPACE or ENTER
+		// to have consistency with the way "Inactive" items behave in the ui5-list
+		if (item.type === "Inactive") {
+			return;
+		}
+
 		this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
 		item.selected = false;
 		this.close();

packages/main/test/pages/Input.html

@@ -88,9 +88,8 @@ <h3>Input suggestions with ui5-li</h3>
 		<ui5-li>Cozy</ui5-li>
 		<ui5-li>Compact</ui5-li>
 		<ui5-li>Condensed</ui5-li>
-		<ui5-li>Cozy</ui5-li>
-		<ui5-li>Compact</ui5-li>
-		<ui5-li>Condensed</ui5-li>
+		<ui5-li type="Inactive">Inactive Compact</ui5-li>
+		<ui5-li type="Inactive">Inactive Condensed</ui5-li>
 	</ui5-input>
 	<br/>
 	<br/>
@@ -101,8 +100,8 @@ <h3>Input suggestions with grouping</h3>
 		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
 		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
 		<ui5-suggestion-item group text="Themes"></ui5-suggestion-item>
-		<ui5-suggestion-item text="Quartz"></ui5-suggestion-item>
-		<ui5-suggestion-item text="HCB"></ui5-suggestion-item>
+		<ui5-suggestion-item type="Inactive" text="Inactive Quartz"></ui5-suggestion-item>
+		<ui5-suggestion-item type="Inactive" text="Inactive HCB"></ui5-suggestion-item>
 	</ui5-input>
 
 	<h3> Input disabled</h3>
@@ -450,23 +449,23 @@ <h3>Test ariaLabel and ariaLabelledBy</h3>
 			el.addEventListener("mouseover", function (event) {
 				const targetRef = event.detail.targetRef;
 				quickViewCard.close();
-				quickViewCard.openBy(item, true /* preventInitialFocus */, false /* closeWithOpener */);
+				quickViewCard.openBy(targetRef, true /* preventInitialFocus */, false /* closeWithOpener */);
 
 				// log info
 				mouseoverResult.value = targetRef.textContent;
 				console.log("mouseover");
 			});
 
 			el.addEventListener("mouseout", function (event) {
-				if (!focusQuickView) {
-					quickViewCard.close(false, false, true);
-				}
+				// if (!focusQuickView) {
+				// 	quickViewCard.close(false, false, true);
+				// }
 
-				focusQuickView = false;
+				// focusQuickView = false;
 
-				// log info
-				mouseoutResult.value = event.detail.targetRef.textContent;
-				console.log("mouseout");
+				// // log info
+				// mouseoutResult.value = event.detail.targetRef.textContent;
+				// console.log("mouseout");
 			});
 		});
 

packages/main/test/specs/Input.spec.js

@@ -217,11 +217,12 @@ describe("Input general interaction", () => {
 		suggestionsInput.keys("c"); // to open the suggestions pop up once again
 		suggestionsInput.keys("ArrowUp");
 
-		assert.strictEqual(suggestionsInput.getValue(), "Condensed", "First item has been selected");
+		assert.strictEqual(suggestionsInput.getValue(), "",
+			"The Last item 'Inactive Condensed' has been selected, producing empty string as 'Inactive'");
 
 		inputResult.click();
 
-		assert.strictEqual(inputResult.getValue(), "1", "suggestionItemSelect is fired once");
+		assert.strictEqual(inputResult.getValue(), "1", "suggestionItemSelect is not fired as item is 'Inactive'");
 	});
 
 	it("handles group suggestion item via keyboard", () => {