fix(ui5-view-settings-dialog): clicking on the radio button/checkbox works

packages/fiori/cypress/specs/ViewSettingsDialog.cy.ts

@@ -0,0 +1,92 @@
+import { html } from "lit";
+import "../../src/ViewSettingsDialog.js";
+import "../../src/SortItem.js";
+
+describe("View settings dialog - selection", () => {
+	beforeEach(() => {
+		cy.mount(html`
+			<ui5-view-settings-dialog id="vsd" sort-ascending>
+        		<ui5-sort-item slot="sortItems" text="Name" selected></ui5-sort-item>
+       			<ui5-sort-item slot="sortItems" text="Position"></ui5-sort-item>
+    		</ui5-view-settings-dialog>
+		`);
+	});
+
+	it("tests clicking on the text itself", () => {
+		cy.get("[ui5-view-settings-dialog]").as("vsd");
+
+		// Bind the "confirm" event - it will be called twice (first with Position, then with Name)
+		cy.get("@vsd")
+			.then(vsd => {
+				vsd.get(0).addEventListener("ui5-confirm", cy.stub().as("confirm"));
+			});
+
+		// Open the dialog and wait until it's visible
+		cy.get("@vsd")
+			.invoke("prop", "open", true)
+			.shadow()
+			.find("div")
+			.should("be.visible");
+
+		// There should be 4 list items in the dialog - Ascending, Descending, Name, Position
+		cy.get("@vsd")
+			.shadow()
+			.find("[ui5-li]")
+			.should("have.length", 4);
+
+		// Click the TEXT of the 4th item (Position)
+		cy.get("@vsd")
+			.shadow()
+			.find("[ui5-li]")
+			.eq(3)
+			.shadow()
+			.find("span[part=title]") // we click the text itself first
+			.realClick();
+
+		// Click the OK button of the dialog
+		cy.get("@vsd")
+			.shadow()
+			.find("ui5-button[design=Emphasized]")
+			.realClick();
+
+		// Check if the confirm event was fired with sortBy = "Position"
+		cy.get("@confirm")
+			.should("be.called")
+			.its("firstCall.args.0.detail.sortBy")
+			.should("equal", "Position");
+
+		// Wait until the dialog is closed
+		cy.get("@vsd")
+			.shadow()
+			.find("div")
+			.should("not.be.visible");
+
+		// Open the dialog again and wait until it's visible
+		cy.get("@vsd")
+			.invoke("prop", "open", true)
+			.shadow()
+			.find("div")
+			.should("be.visible");
+
+		// Click the RADIO BUTTON of the 3th item (Name) instead of the text this time
+		cy.get("@vsd")
+			.shadow()
+			.find("[ui5-li]")
+			.eq(2)
+			.shadow()
+			.find("[ui5-radio-button]")
+			.realClick();
+
+		// Click the OK button of the dialog again
+		cy.get("@vsd")
+			.shadow()
+			.find("ui5-button[design=Emphasized]")
+			.realClick();
+
+		// Check if the confirm event was fired for a second time, now with sortBy = "Name"
+		cy.get("@confirm")
+			.should("be.called")
+			.its("secondCall.args.0.detail.sortBy")
+			.should("equal", "Name");
+	});
+});

packages/fiori/src/ViewSettingsDialog.ts

@@ -10,7 +10,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import type List from "@ui5/webcomponents/dist/List.js";
-import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js";
+import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
 
@@ -515,12 +515,12 @@ class ViewSettingsDialog extends UI5Element {
 		this._currentMode = ViewSettingsDialogMode[mode];
 	}
 
-	_handleFilterValueItemClick(e: CustomEvent<ListItemClickEventDetail>) {
+	_handleFilterValueItemClick(e: CustomEvent<ListSelectionChangeEventDetail>) {
 		// Update the component state
 		this._currentSettings.filters = this._currentSettings.filters.map(filter => {
 			if (filter.selected) {
 				filter.filterOptions.forEach(option => {
-					if (option.text === e.detail.item.innerText) {
+					if (option.text === e.detail.selectedItems[0].innerText) {
 						option.selected = !option.selected;
 					}
 				});
@@ -538,10 +538,10 @@ class ViewSettingsDialog extends UI5Element {
 	 * @param e
 	 * @private
 	 */
-	_setSelectedProp(e: CustomEvent<ListItemClickEventDetail>) {
+	_setSelectedProp(e: CustomEvent<ListSelectionChangeEventDetail>) {
 		this.filterItems.forEach(filterItem => {
 			filterItem.values.forEach(option => {
-				if (option.text === e.detail.item.innerText) {
+				if (option.text === e.detail.selectedItems[0].innerText) {
 					option.selected = !option.selected;
 				}
 			});
@@ -552,10 +552,10 @@ class ViewSettingsDialog extends UI5Element {
 		this._filterStepTwo = false;
 	}
 
-	_changeCurrentFilter(e: CustomEvent<ListItemClickEventDetail>) {
+	_changeCurrentFilter(e: CustomEvent<ListSelectionChangeEventDetail>) {
 		this._filterStepTwo = true;
 		this._currentSettings.filters = this._currentSettings.filters.map(filter => {
-			filter.selected = filter.text === e.detail.item.innerText;
+			filter.selected = filter.text === e.detail.selectedItems[0].innerText;
 			return filter;
 		});
 	}
@@ -669,10 +669,10 @@ class ViewSettingsDialog extends UI5Element {
 	/**
 	 * Stores `Sort Order` list as recently used control and its selected item in current state.
 	 */
-	_onSortOrderChange(e: CustomEvent<ListItemClickEventDetail>) {
+	_onSortOrderChange(e: CustomEvent<ListSelectionChangeEventDetail>) {
 		this._recentlyFocused = this._sortOrder!;
 		this._currentSettings.sortOrder = this.initSortOrderItems.map(item => {
-			item.selected = item.text === e.detail.item.innerText;
+			item.selected = item.text === e.detail.selectedItems[0].innerText;
 			return item;
 		});
 
@@ -683,8 +683,8 @@ class ViewSettingsDialog extends UI5Element {
 	/**
 	 * Stores `Sort By` list as recently used control and its selected item in current state.
 	 */
-	_onSortByChange(e: CustomEvent<ListItemClickEventDetail>) {
-		const selectedItemIndex = Number(e.detail.item.getAttribute("data-ui5-external-action-item-index"));
+	_onSortByChange(e: CustomEvent<ListSelectionChangeEventDetail>) {
+		const selectedItemIndex = Number(e.detail.selectedItems[0].getAttribute("data-ui5-external-action-item-index"));
 		this._recentlyFocused = this._sortBy!;
 		this._currentSettings.sortBy = this.initSortByItems.map((item, index) => {
 			item.selected = index === selectedItemIndex;

packages/fiori/src/ViewSettingsDialogTemplate.tsx

@@ -78,7 +78,7 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 				<div class="ui5-vsd-sort">
 					<List
 						selectionMode="SingleStart"
-						onItemClick={this._onSortOrderChange}
+						onSelectionChange={this._onSortOrderChange}
 						sort-order=""
 						accessibleNameRef={`${this._id}-label`}
 					>
@@ -92,7 +92,7 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 					</List>
 					<List
 						selectionMode="SingleStart"
-						onItemClick={this._onSortByChange}
+						onSelectionChange={this._onSortByChange}
 						sort-by=""
 					>
 						<ListItemGroup headerText={this._sortByLabel}>
@@ -110,7 +110,7 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 				{this._filterStepTwo ? (
 					<List
 						selectionMode="Multiple"
-						onItemClick={this._handleFilterValueItemClick}
+						onSelectionChange={this._handleFilterValueItemClick}
 						accessibleNameRef={`${this._id}-label`}
 					>
 						{this._currentSettings.filters.filter(item => item.selected).map(item => (<>
@@ -123,7 +123,7 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 					</List>
 				) : ( // else
 					<List
-						onItemClick={this._changeCurrentFilter}
+						onSelectionChange={this._changeCurrentFilter}
 						accessibleNameRef={`${this._id}-label`}
 					>
 						<ListItemGroup headerText={this._filterByLabel}>