fix: make listeners passive (#5012)

Author: fifoosid

packages/base/hash.txt

@@ -1 +1 @@
-Qztq2lzPEMPQUMmcTqNy+GZ3Aig=
+1xd6xbRotmYM0O01qxhGL8Fk17E=

packages/main/src/Button.js

@@ -356,6 +356,18 @@ class Button extends UI5Element {
 
 			isGlobalHandlerAttached = true;
 		}
+
+		this._ontouchstart = {
+			handleEvent(event) {
+				event.isMarked = "button";
+				if (this.nonInteractive) {
+					return;
+				}
+
+				this.active = true;
+			},
+			passive: true,
+		};
 	}
 
 	onEnterDOM() {
@@ -397,15 +409,6 @@ class Button extends UI5Element {
 		activeButton = this; // eslint-disable-line
 	}
 
-	_ontouchstart(event) {
-		event.isMarked = "button";
-		if (this.nonInteractive) {
-			return;
-		}
-
-		this.active = true;
-	}
-
 	_ontouchend(event) {
 		this.active = false;
 

packages/main/src/ListItem.js

@@ -148,6 +148,13 @@ class ListItem extends ListItemBase {
 				this.active = false;
 			}
 		};
+
+		this._ontouchstart = {
+			handleEvent(event) {
+				this._onmousedown(event);
+			},
+			passive: true,
+		};
 	}
 
 	onBeforeRendering(...params) {
@@ -212,10 +219,6 @@ class ListItem extends ListItemBase {
 		this.deactivate();
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	_ontouchend(event) {
 		this._onmouseup(event);
 	}

packages/main/src/SliderBase.js

@@ -159,6 +159,13 @@ class SliderBase extends UI5Element {
 			max: null,
 			labelInterval: null,
 		};
+
+		this._ontouchstart = {
+			handleEvent(event) {
+				this._onmousedown(event);
+			},
+			passive: true,
+		};
 	}
 
 	static get metadata() {
@@ -255,10 +262,6 @@ class SliderBase extends UI5Element {
 		}
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	/** Shows the tooltip(s) if the <code>showTooltip</code> property is set to true
 	 *
 	 * @private

packages/main/src/SplitButton.js

@@ -302,6 +302,19 @@ class SplitButton extends UI5Element {
 		SplitButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
+	constructor() {
+		super();
+
+		this._textButtonPress = {
+			handleEvent(event) {
+				this._textButtonActive = true;
+				this.focused = false;
+				this._setTabIndexValue();
+			},
+			passive: true,
+		};
+	}
+
 	onBeforeRendering() {
 		this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
 		if (this.disabled) {
@@ -383,12 +396,6 @@ class SplitButton extends UI5Element {
 		this._setTabIndexValue();
 	}
 
-	_textButtonPress() {
-		this._textButtonActive = true;
-		this.focused = false;
-		this._setTabIndexValue();
-	}
-
 	_setTabIndexValue() {
 		const textButton = this.textButton,
 			arrowButton = this.arrowButton,

packages/main/src/TableRow.js

@@ -191,6 +191,17 @@ class TableRow extends UI5Element {
 		return [CheckBox];
 	}
 
+	constructor() {
+		super();
+
+		this._ontouchstart = {
+			handleEvent(event) {
+				this.activate();
+			},
+			passive: true,
+		};
+	}
+
 	_onmouseup() {
 		this.deactivate();
 	}
@@ -240,10 +251,6 @@ class TableRow extends UI5Element {
 		}
 	}
 
-	_ontouchstart(event) {
-		this.activate();
-	}
-
 	_ontouchend() {
 		this.deactivate();
 	}

packages/main/src/TimePickerBase.js

@@ -442,6 +442,13 @@ class TimePickerBase extends UI5Element {
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 	}
 
+	/**
+	 *
+	 * @param {event} e Wheel Event
+	 * @private
+	 *
+	 * The listener for this event can't be passive as it calls preventDefault()
+	 */
 	_handleWheel(e) {
 		e.preventDefault();
 	}

packages/main/src/WheelSlider.js

@@ -342,6 +342,13 @@ class WheelSlider extends UI5Element {
 		return index;
 	}
 
+	/**
+	 *
+	 * @param {event} e Wheel Event
+	 * @private
+	 *
+	 * The listener for this event can't be passive as it calls preventDefault()
+	 */
 	_handleWheel(e) {
 		if (!e) {
 			return;