feat(ui5-input): close suggestions popover on group item enter

SAP · Nov 29, 2023 · 2404f03 · 2404f03
1 parent 68b4c93
commit 2404f03
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -870,7 +870,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	}
 
 	_handleEnter(e: KeyboardEvent) {
-		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e));
+		const suggestionItemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e));
+
 		const innerInput = this.getInputDOMRefSync()!;
 		// Check for autocompleted item
 		const matchingItem = this.suggestionItems.find(item => {
@@ -881,7 +882,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 			const itemText = matchingItem.text ? matchingItem.text : (matchingItem.textContent || "");
 
 			innerInput.setSelectionRange(itemText.length, itemText.length);
-			if (!itemPressed) {
+			if (!suggestionItemPressed) {
 				this.selectSuggestion(matchingItem, true);
 				this.open = false;
 			}
@@ -891,14 +892,16 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 			innerInput.setSelectionRange(this.value.length, this.value.length);
 		}
 
-		if (!itemPressed) {
+		if (!suggestionItemPressed) {
 			this.lastConfirmedValue = this.value;
 
-			if (this.FormSupport) {
+			if (this.open && this.Suggestions?._isGroupOrInactiveItem) {
+				this.isTyping = false;
+				this._forceOpen = false;
+				this.open = false;
+			} else if (this.FormSupport) {
 				this.FormSupport.triggerFormSubmit(this);
 			}
-
-			return;
 		}
 
 		this.focused = true;
@@ -1290,7 +1293,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 		if (isCancelledByUser) {
 			this.Suggestions?._clearSelectedSuggestionAndAccInfo();
 			this.hasSuggestionItemSelected = false;
-			this.suggestionSelectionCancelled = false;
+			this.suggestionSelectionCancelled = true;
 
 			this.isTyping = false;
 			this.openOnMobile = false;

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -14,7 +14,7 @@
 </head>
 
 <body class="input1auto">
-	<!-- <h3> Input with suggestions: type 'a'</h3>
+	<h3> Input with suggestions: type 'a'</h3>
 	<ui5-label id="myLabel">Event [suggestionItemSelect] :: N/A</ui5-label><br/>
 	<ui5-label id="myLabelChange">Event [change] :: N/A</ui5-label><br/>
 	<ui5-label id="myLabelLiveChange">Event [input] :: N/A</ui5-label><br/>
@@ -41,33 +41,23 @@ <h3>Input in Compact</h3>
 			show-suggestions
 			placeholder="Search for a country ...">
 		</ui5-input>
-	</div> -->
+	</div>
 
 	<br/>
 	<br/>
 	<h3>Input suggestions with ui5-li</h3>
-	<ui5-input id="myInput2" show-suggestions class="input3auto" no-typeahead>
+	<ui5-input id="myInput2" show-suggestions class="input3auto">
 		<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>
 
-	<script>
-		var input = document.querySelector("#myInput2");
-		input.addEventListener("suggestion-item-select", (e) => {
-			if(e.detail.item.text === "Cozy" || e.detail.item.textContent === "Cozy"){
-				e.preventDefault();
-				//input.value = "alabala";
-			}
-		}, true);
-
-	</script>
 	<br/>
 	<br/>
 	<h3>Input suggestions with grouping</h3>
-	<ui5-input id="myInputGrouping" show-suggestions class="input3auto" no-typeahead>
+	<ui5-input id="myInputGrouping" show-suggestions class="input3auto">
 		<ui5-suggestion-group-item text="Content Density"></ui5-suggestion-group-item>
 		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
 		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
@@ -78,7 +68,7 @@ <h3>Input suggestions with grouping</h3>
 		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
 	</ui5-input>
 
-	<!-- <h3>Input suggestions with highlighing</h3>
+	<h3>Input suggestions with highlighing</h3>
 	<ui5-input id="myInputHighlighted" show-suggestions class="input3auto">
 		<ui5-suggestion-item text="Adam D" description="Administrative Support"></ui5-suggestion-item>
 		<ui5-suggestion-item text="Aanya Sing" description="Administrative Support"></ui5-suggestion-item>
@@ -764,6 +754,6 @@ <h3>Input - change event handling</h3>
 		});
 
 		document.getElementById("change-event-value").addEventListener("ui5-change", event => event.target.value = "");
-	</script> -->
+	</script>
 </body>
 </html>