fix(ui5-li-custom): keyboard handling improvement (#2870)

Key up and key down events should be prevented when the focus is on child element of the ui5-li-custom. Exception is made for the case where Tab key is pressed so the logic about item navigation from the extended class to be executed.

Fixes: #2849

Author: nnaydenow

packages/main/src/CustomListItem.js

@@ -1,5 +1,6 @@
 import ListItem from "./ListItem.js";
 import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 
 // Styles
 import customListItemCss from "./generated/themes/CustomListItem.css.js";
@@ -55,15 +56,19 @@ class CustomListItem extends ListItem {
 	}
 
 	_onkeydown(event) {
-		if (!this.focused) {
+		const isTab = isTabNext(event) || isTabPrevious(event);
+
+		if (!isTab && !this.focused) {
 			return;
 		}
 
 		super._onkeydown(event);
 	}
 
 	_onkeyup(event) {
-		if (!this.focused) {
+		const isTab = isTabNext(event) || isTabPrevious(event);
+
+		if (!isTab && !this.focused) {
 			return;
 		}
 

packages/main/test/pages/List_test_page.html

@@ -97,6 +97,7 @@
 				<ui5-radiobutton text="Option C" disabled="disabled"></ui5-radiobutton>
 		</ui5-li-custom>
 	</ui5-list>
+	<ui5-button id="randomBtn">Random button</ui5-button>
 
 	<ui5-list id="no-data-list" header-text="API: noDataText" separators="None" no-data-text="No Data Available"></ui5-list>
 

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

@@ -185,6 +185,7 @@ describe("List Tests", () => {
 		const itemBtn = $("ui5-button.itemBtn");
 		const itemLink = $("ui5-link.itemLink");
 		const itemRadioBtn = $("ui5-radiobutton.itemRadio");
+		const randomBtn = $("#randomBtn");
 
 		headerBtn.click();
 		assert.strictEqual(headerBtn.isFocused(), true, "header btn is focused");
@@ -205,6 +206,11 @@ describe("List Tests", () => {
 		// and go to the "Option B" radio button
 		itemLink.keys("Tab");
 		assert.strictEqual(itemRadioBtn.isFocused(), true, "the last tabbable element (radio) is focused");
+
+		// act: TAB from the "Option B" radio button - the focus should leave  the ui5-list
+		// and Random button should be focused
+		itemLink.keys("Tab");
+		assert.strictEqual(randomBtn.isFocused(), true, "element outside of the list is focused");
 	});
 
 	it("does not focus next / prev item when right / left arrow is pressed", () => {