diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index fad14b99514f..547189a037fb 100644 --- a/packages/main/src/Table.ts +++ b/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); diff --git a/packages/main/src/TableSelection.ts b/packages/main/src/TableSelection.ts index 756bbf9c3425..f3edd1104364 100644 --- a/packages/main/src/TableSelection.ts +++ b/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; diff --git a/packages/main/src/TableSelectionMulti.ts b/packages/main/src/TableSelectionMulti.ts index 58c6c2f6baeb..8bb86b0d2582 100644 --- a/packages/main/src/TableSelectionMulti.ts +++ b/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;