fix(ui5-li): fix active state on mobile (#1169)

SAP · Jan 31, 2020 · 90223f8 · 90223f8
1 parent 35b2593
commit 90223f8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
@@ -8,6 +8,8 @@
 	@keydown="{{_onkeydown}}"
 	@mouseup="{{_onmouseup}}"
 	@mousedown="{{_onmousedown}}"
+	@touchstart="{{_ontouchstart}}"
+	@touchend="{{_ontouchend}}"
 	@click="{{_onclick}}"
 >
 		{{#if placeSelectionElementBefore}}

diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js
@@ -1,5 +1,4 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
@@ -114,20 +113,19 @@ class ListItem extends ListItemBase {
 	}
 
 	onBeforeRendering(...params) {
-		const desktop = isDesktop();
-		const isActionable = (this.type === ListItemType.Active) && (this._mode !== ListMode.Delete);
-
-		this.actionable = desktop && isActionable;
+		this.actionable = (this.type === ListItemType.Active) && (this._mode !== ListMode.Delete);
 	}
 
 	onEnterDOM() {
 		document.addEventListener("mouseup", this.deactivate);
+		document.addEventListener("touchend", this.deactivate);
 		document.addEventListener("keyup", this.deactivateByKey);
 	}
 
 	onExitDOM() {
 		document.removeEventListener("mouseup", this.deactivate);
 		document.removeEventListener("keyup", this.deactivateByKey);
+		document.removeEventListener("touchend", this.deactivate);
 	}
 
 	_onkeydown(event) {
@@ -172,6 +170,14 @@ class ListItem extends ListItemBase {
 		this.deactivate();
 	}
 
+	_ontouchstart(event) {
+		this._onmousedown(event);
+	}
+
+	_ontouchend(event) {
+		this._onmouseup(event);
+	}
+
 	_onfocusout() {
 		super._onfocusout();
 		this.deactivate();