fix(ui5-table): register capture individually for selection (#11899)

* fix(ui5-table): register capture individually for selection

* fix: remove captures for keyup/down

* chore: adjust event registration

Author: DonkeyCo

packages/main/src/Table.ts

@@ -419,7 +419,7 @@ class Table extends UI5Element {
 	}
 
 	onEnterDOM() {
-		this._events.forEach(eventType => this.addEventListener(eventType, this._onEventBound, { capture: true }));
+		this._events.forEach(eventType => this.addEventListener(eventType, this._onEventBound));
 		this.features.forEach(feature => feature.onTableActivate?.(this));
 		this._tableNavigation = new TableNavigation(this);
 		this._tableDragAndDrop = new TableDragAndDrop(this);

packages/main/src/TableSelection.ts

@@ -88,6 +88,13 @@ class TableSelection extends UI5Element implements ITableFeature {
 	_rowsLength = 0;
 	_rangeSelection?: {selected: boolean, isUp: boolean | null, rows: TableRow[], isMouse: boolean, shiftPressed: boolean} | null;
 
+	onClickCaptureBound: (e: MouseEvent) => void;
+
+	constructor() {
+		super();
+		this.onClickCaptureBound = this._onClickCapture.bind(this);
+	}
+
 	onTableActivate(table: Table) {
 		this._table = table;
 		this._invalidateTableAndRows();
@@ -108,6 +115,12 @@ class TableSelection extends UI5Element implements ITableFeature {
 			this._rowsLength = this._table.rows.length;
 			this._table.headerRow[0]._invalidate++;
 		}
+
+		this._table?.removeEventListener("click", this.onClickCaptureBound);
+	}
+
+	onTableAfterRendering(): void {
+		this._table?.addEventListener("click", this.onClickCaptureBound, { capture: true });
 	}
 
 	isSelectable(): boolean {
@@ -272,7 +285,7 @@ class TableSelection extends UI5Element implements ITableFeature {
 		}
 	}
 
-	_onclick(e: MouseEvent) {
+	_onClickCapture(e: MouseEvent) {
 		if (!this._table || this.mode !== TableSelectionMode.Multiple) {
 			return;
 		}
@@ -294,11 +307,13 @@ class TableSelection extends UI5Element implements ITableFeature {
 			const startIndex = this._table.rows.indexOf(startRow);
 			const endIndex = this._table.rows.indexOf(row);
 
+			const selectionState = this.isSelected(startRow);
+
 			// When doing a range selection and clicking on an already selected row, the checked status should not change
 			// Therefore, we need to manually set the checked attribute again, as clicking it would deselect it and leads to
 			// a visual inconsistency.
-			row.shadowRoot?.querySelector("#selection-component")?.toggleAttribute("checked", true);
-			e.stopImmediatePropagation();
+			row.shadowRoot?.querySelector("#selection-component")?.toggleAttribute("checked", selectionState);
+			e.stopPropagation();
 
 			if (startIndex === -1 || endIndex === -1 || row.rowKey === startRow.rowKey || row.rowKey === this._rangeSelection.rows[this._rangeSelection.rows.length - 1].rowKey) {
 				return;

packages/main/src/TableSelectionMulti.ts

@@ -67,11 +67,24 @@ class TableSelectionMulti extends TableSelectionBase {
 		shiftPressed: boolean
 	} | null;
 
+	_onClickCaptureBound: (e: MouseEvent) => void;
+
+	constructor() {
+		super();
+		this._onClickCaptureBound = this._onclickCapture.bind(this);
+	}
+
 	onTableBeforeRendering() {
 		if (this._table && this._table.headerRow[0] && this._rowsLength !== this._table.rows.length) {
 			this._rowsLength = this._table.rows.length;
 			this._table.headerRow[0]._invalidate++;
 		}
+
+		this._table?.removeEventListener("click", this._onClickCaptureBound);
+	}
+
+	onTableAfterRendering() {
+		this._table?.addEventListener("click", this._onClickCaptureBound, { capture: true });
 	}
 
 	isMultiSelectable(): boolean {
@@ -197,7 +210,7 @@ class TableSelectionMulti extends TableSelectionBase {
 		}
 	}
 
-	_onclick(e: MouseEvent) {
+	_onclickCapture(e: MouseEvent) {
 		if (!this._table) {
 			return;
 		}
@@ -219,11 +232,14 @@ class TableSelectionMulti extends TableSelectionBase {
 			const startIndex = this._table.rows.indexOf(startRow);
 			const endIndex = this._table.rows.indexOf(row);
 
+			// Set checkbox to the selection state of the start row (if it is selected)
+			const selectionState = this.isSelected(startRow);
+
 			// When doing a range selection and clicking on an already selected row, the checked status should not change
 			// Therefore, we need to manually set the checked attribute again, as clicking it would deselect it and leads to
 			// a visual inconsistency.
-			row.shadowRoot?.querySelector("#selection-component")?.toggleAttribute("checked", true);
-			e.stopImmediatePropagation();
+			row.shadowRoot?.querySelector("#selection-component")?.toggleAttribute("checked", selectionState);
+			e.stopPropagation();
 
 			if (startIndex === -1 || endIndex === -1 || row.rowKey === startRow.rowKey || row.rowKey === this._rangeSelection.rows[this._rangeSelection.rows.length - 1].rowKey) {
 				return;