fix(ui5-select): Selection now changes instantly (#2031)

Author: vladitasev

packages/main/src/List.js

@@ -471,6 +471,10 @@ class List extends UI5Element {
 		return this.handleSingleSelect(item);
 	}
 
+	handleSingleSelectAuto(item) {
+		return this.handleSingleSelect(item);
+	}
+
 	handleMultiSelect(item, selected) {
 		item.selected = selected;
 		return true;
@@ -595,6 +599,17 @@ class List extends UI5Element {
 
 		this._itemNavigation.update(target);
 		this.fireEvent("item-focused", { item: target });
+
+		if (this.mode === ListMode.SingleSelectAuto) {
+			this.onSelectionRequested({
+				detail: {
+					item: target,
+					selectionComponentPressed: false,
+					selected: true,
+					key: event.detail.key,
+				},
+			});
+		}
 	}
 
 	onItemPress(event) {

packages/main/src/Select.js

@@ -360,13 +360,28 @@ class Select extends UI5Element {
 		this.options[index].selected = true;
 	}
 
-	_selectionChange(event) {
-		const selectedItemIndex = this._getSelectedItemIndex(event.detail.item);
-
+	/**
+	 * The user clicked on an item from the list
+	 * @private
+	 */
+	_handleItemPress(event) {
+		const item = event.detail.item;
+		const selectedItemIndex = this._getSelectedItemIndex(item);
 		this._select(selectedItemIndex);
+
 		this._toggleRespPopover();
 	}
 
+	/**
+	 * The user used arrow up/down on the list
+	 * @private
+	 */
+	_handleSelectionChange(event) {
+		const item = event.detail.selectedItems[0];
+		const selectedItemIndex = this._getSelectedItemIndex(item);
+		this._select(selectedItemIndex);
+	}
+
 	_applyFocusAfterOpen() {
 		if (!this._currentlySelectedOption) {
 			return;
@@ -379,7 +394,13 @@ class Select extends UI5Element {
 	}
 
 	_handlePickerKeydown(event) {
-		this._handleArrowNavigation(event, false);
+		if (isEscape(event) && this._isPickerOpen) {
+			this._escapePressed = true;
+		}
+
+		if (isEnter(event) || isSpace(event)) {
+			this._shouldClosePopover = true;
+		}
 	}
 
 	_handleArrowNavigation(event, shouldFireEvent) {
@@ -403,14 +424,6 @@ class Select extends UI5Element {
 				this._fireChangeEvent(this.options[nextIndex]);
 			}
 		}
-
-		if (isEscape(event) && this._isPickerOpen) {
-			this._escapePressed = true;
-		}
-
-		if (isEnter(event) || isSpace(event)) {
-			this._shouldClosePopover = true;
-		}
 	}
 
 	_getNextOptionIndex() {

packages/main/src/SelectPopover.hbs

@@ -23,12 +23,12 @@
 			</div>
 		</div>
 
-		<ui5-list mode="SingleSelect" separators="None" @keydown="{{_handlePickerKeydown}}" @ui5-item-press="{{_selectionChange}}">
+		<ui5-list mode="SingleSelectAuto" separators="None" @keydown="{{_handlePickerKeydown}}" @ui5-selection-change="{{_handleSelectionChange}}" @ui5-item-press="{{_handleItemPress}}">
 			{{#each _syncedOptions}}
 				<ui5-li ?selected="{{this.selected}}" icon="{{this.icon}}" id="{{this.id}}-li">
 					{{this.textContent}}
 				</ui5-li>
 			{{/each}}
 		</ui5-list>
 	</ui5-responsive-popover>
-{{/if}}
+{{/if}}

packages/main/src/types/ListMode.js

@@ -34,6 +34,14 @@ const ListModes = {
 	 */
 	SingleSelectEnd: "SingleSelectEnd",
 
+	/**
+	 * Selected item is highlighted and selection is changed upon arrow navigation
+	 * (only one list item can be selected - this is always the focused item).
+	 * @public
+	 * @type {SingleSelectAuto}
+	 */
+	SingleSelectAuto: "SingleSelectAuto",
+
 	/**
 	 * Multi selection mode (more than one list item can be selected).
 	 * @public