feat(ui5-list, ui5-tree): Add noClickSelect

When using the ui5-list or ui5-tree with mode MultiSelect,
SingleSelectEnd, or SingleSelectBegin it is sometimes undesireable
for a click on an item to always trigger a selection change. An example
use case would be a multi select tree where clicking the checkbox
changes the selection, but clicking the item displays more information.
We introduce a noClickSelect property on ui5-list and ui5-tree that
enables this behaviour.

Fixes SAP#4502

packages/base/hash.txt

@@ -1 +1 @@
-LwpwazozKyw2R4uvmZVLv5VZq7E=
+soJOoOkPWoAm7pZtlyE4zplO3aY=

packages/main/src/List.js

@@ -107,6 +107,21 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * If set to true, clicking on an item does not select it.
+     * Clicking a radio button or checkbox still toggles the selection.
+		 * <br><br>
+		 * <b>Note:</b> The modde must be set to  <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code>,
+     * or <code>MultiSelect</code> for radio buttons / checkboxes to be visible.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		noClickSelect: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines the mode of the component.
 		 * <br><br>
@@ -887,7 +902,7 @@ class List extends UI5Element {
 			return;
 		}
 
-		if (!this._selectionRequested && this.mode !== ListMode.Delete) {
+		if (!this._selectionRequested && this.mode !== ListMode.Delete && !this.noClickSelect) {
 			this._selectionRequested = true;
 			this.onSelectionRequested({
 				detail: {

packages/main/src/Tree.hbs

@@ -3,6 +3,7 @@
     .headerText="{{headerText}}"
     .footerText="{{footerText}}"
     .noDataText="{{noDataText}}"
+    .noClickSelect="{{noClickSelect}}"
     .accessibleRole="{{_role}}"
     @ui5-item-click="{{_onListItemClick}}"
     @ui5-item-delete="{{_onListItemDelete}}"

packages/main/src/Tree.js

@@ -77,6 +77,21 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * If set to true clickin on an item does not select it.
+     * Clicking a radio button or checkbox still toggles the selection.
+		 * <br><br>
+		 * <b>Note:</b> The modde must be set to  <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code>,
+     * or <code>MultiSelect</code> for radio buttons / checkboxes to be visible.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		noClickSelect: {
+			type: Boolean,
+		},
+
 		/**
 		 * An array, containing a flat structure of list items to render
 		 *

packages/main/test/pages/List.html

@@ -109,6 +109,14 @@ <h2>ui5-list</h2>
 
 	<ui5-label id="itemClickPrevent">[prevented Event] itemClick :: n/a</ui5-label>
 
+	<ui5-list id="noClickSelect" mode="MultiSelect" header-text="API: noClickSelect" no-click-select>
+		<ui5-li id="country1" >Argentina</ui5-li>
+		<ui5-li id="country2" >Bulgaria</ui5-li>
+		<ui5-li id="country3" >China</ui5-li>
+	</ui5-list>
+
+	<br/><br/>
+
 	<ui5-list id="myList" mode="SingleSelect" header-text="API: mode='SingleSelect'">
 		<ui5-li id="country1" >Argentina</ui5-li>
 		<ui5-li id="country2" >Bulgaria</ui5-li>

packages/main/test/pages/List_test_page.html

@@ -69,6 +69,13 @@
 	</ui5-list>
 	<ui5-input id="itemClickPreventedResultField" placeholder="itemClick prevented result"></ui5-input>
 
+	<br><br><br>
+
+	<ui5-list id="listNoClickSelect" mode="MultiSelect" no-click-select>
+		<ui5-li id="country1">The first item</ui5-li>
+		<ui5-li id="country2">The second item</ui5-li>
+	</ui5-list>
+
 	<br><br><br>
 	<ui5-list id="justList">
 		<ui5-li id="justList-country">Argentina</ui5-li>

packages/main/test/pages/Tree.html

@@ -100,6 +100,16 @@
 		</ui5-tree>
 	</ui5-busy-indicator>
 
+  <ui5-tree id="treeNoClickSelect" mode="MultiSelect" class="full-width" no-click-select>
+    <div slot="header" class="hdr">
+      <ui5-title>API: noClickSelect</ui5-title>
+    </div>
+    <ui5-tree-item text="Tree 1" expanded>
+      <ui5-tree-item text="Tree 1.1"></ui5-tree-item>
+      <ui5-tree-item text="Tree 1.2"></ui5-tree-item>
+    </ui5-tree-item>
+  </ui5-tree>
+
 	<script>
 		const mouseOverInput = document.getElementById("mouseover-counter");
 		const mouseOutInput = document.getElementById("mouseout-counter");

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

@@ -383,6 +383,14 @@ describe("List Tests", () => {
 		assert.strictEqual(await firstItem.getProperty("id"), await input.getProperty("value"));
 	});
 
+  it("should not select an item when clicked, if noClickSelect is true", async () => {
+		const item = await browser.$('#listNoClickSelect ui5-li:nth-child(1)');
+
+		await item.click();
+
+		assert.notOk(await item.getAttribute("selected"), "item is not selected");
+  });
+
 	it("Popover with List opens without errors", async () => {
 		const btnPopupOpener = await browser.$("#btnOpenPopup");
 		const btnInListHeader = await browser.$("#btnInHeader");

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

@@ -62,6 +62,13 @@ describe("Tree proxies properties to list", () => {
 		assert.strictEqual(await list.getAttribute("no-data-text"), "no data text", "no data text applied");
 	})
 
+  it("noClickSelect works", async () => {
+		const tree = await browser.$("#treeNoClickSelect");
+		const list = await tree.shadow$("ui5-list");
+
+		assert.strictEqual(await list.getAttribute("no-click-select"), "", "no click select applied");
+  });
+
 	it("Mouseover/mouseout events", async () => {
 		const tree = await browser.$("#tree");
 		const treeItems = await tree.shadow$$("ui5-li-tree");

packages/theming/hash.txt

@@ -1 +1 @@
-rZnyMTmoc2CFM82C+7zGHcw3GGY=
+CQhk8M6oN0XzkZBkgImthR2kdTs=