Skip to content

Commit c48f541

Browse files
vladitasevvladitasev
authored
fix(ui5-table): rowClick is fired for popped in cells as well (#1671)
1 parent da30bc1 commit c48f541

File tree

6 files changed

+58
-72
lines changed

6 files changed

+58
-72
lines changed

‎packages/main/src/Table.js

-8
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,6 @@ class Table extends UI5Element {
201201
}.bind(this);
202202

203203
this.fnOnRowFocused = this.onRowFocused.bind(this);
204-
this.fnOnRowClick = this.onRowClick.bind(this);
205204

206205
this._handleResize = this.popinContent.bind(this);
207206
}
@@ -218,9 +217,6 @@ class Table extends UI5Element {
218217

219218
row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
220219
row.addEventListener("ui5-_focused", this.fnOnRowFocused);
221-
222-
row.removeEventListener("ui5-_click", this.fnOnRowClick);
223-
row.addEventListener("ui5-_click", this.fnOnRowClick);
224220
});
225221

226222
this.visibleColumns = this.columns.filter((column, index) => {
@@ -244,10 +240,6 @@ class Table extends UI5Element {
244240
this._itemNavigation.update(event.target);
245241
}
246242

247-
onRowClick(event) {
248-
this.fireEvent("rowClick", { row: event.target });
249-
}
250-
251243
_onColumnHeaderClick(event) {
252244
this.getColumnHeader().focus();
253245
this._itemNavigation.update(event.target);

‎packages/main/src/TableCell.hbs

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<td
2-
@click="{{_onclick}}"
32
tabindex="-1"
43
part="cell"
54
>

‎packages/main/src/TableCell.js

-4
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,6 @@ class TableCell extends UI5Element {
7979
static get template() {
8080
return TableCellTemplate;
8181
}
82-
83-
_onclick(event) {
84-
this.fireEvent("_cellclick", event);
85-
}
8682
}
8783

8884
TableCell.define();

‎packages/main/src/TableRow.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
class="ui5-table-row-root"
33
tabindex="{{_tabIndex}}"
44
@focusin="{{_onfocusin}}"
5-
@ui5-_cellclick="{{_oncellclick}}"
5+
@click="{{_onrowclick}}"
66
data-sap-focus-ref
77
part="row"
88
>
@@ -19,7 +19,7 @@
1919

2020
{{#if shouldPopin}}
2121
{{#each popinCells}}
22-
<tr part="popin-row" class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
22+
<tr part="popin-row" class="ui5-table-popin-row" @click="{{../_onrowclick}}">
2323
<td colspan="{{../visibleCellsCount}}">
2424
{{#if this.popinText}}
2525
<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>

‎packages/main/src/TableRow.js

+2-9
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ const metadata = {
3939
},
4040
events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
4141
_focused: {},
42-
43-
_click: {},
4442
},
4543
};
4644

@@ -59,11 +57,6 @@ const metadata = {
5957
* @public
6058
*/
6159
class TableRow extends UI5Element {
62-
constructor() {
63-
super();
64-
this.fnOnCellClick = this._oncellclick.bind(this);
65-
}
66-
6760
static get metadata() {
6861
return metadata;
6962
}
@@ -88,7 +81,7 @@ class TableRow extends UI5Element {
8881
this.fireEvent("_focused", event);
8982
}
9083

91-
_oncellclick(event) {
84+
_onrowclick(event) {
9285
if (this._getActiveElementTagName() === "body") {
9386
// If the user clickes on non-focusable element within the ui5-table-cell,
9487
// the focus goes to the body, se we have to bring it back to the row.
@@ -97,7 +90,7 @@ class TableRow extends UI5Element {
9790
this._onfocusin(event, true /* force row focus */);
9891
}
9992

100-
this.fireEvent("_click");
93+
this.fireEvent("rowClick", { row: this });
10194
}
10295

10396
_getActiveElementTagName() {

‎packages/main/test/pages/TableCustomStyling.html

+54-48
Original file line numberDiff line numberDiff line change
@@ -33,39 +33,39 @@
3333
height: 100%;
3434
}
3535

36-
/* All rows - height */
37-
#tbl ui5-table-row::part(row) {
38-
height: 4rem;
39-
}
40-
/* One row - higher than the rest */
41-
#tbl ui5-table-row#row3::part(row) {
42-
height: 6rem;
43-
}
44-
45-
/* All columns - center both vertically and horizontally */
46-
#tbl ui5-table-column::part(column) {
47-
vertical-align: middle;
48-
text-align: center;
49-
}
50-
51-
/* All cells - center both vertically and horizontally */
52-
#tbl ui5-table-cell::part(cell) {
53-
vertical-align: middle;
54-
text-align: center;
55-
}
56-
57-
/* Title column & cells - left aligned */
58-
#tbl ui5-table-cell.title-cell::part(cell),
59-
#tbl ui5-table-column.title-column::part(column) {
60-
text-align: left;
61-
}
62-
63-
/* Price column & cells - right aligned with some padding */
64-
#tbl ui5-table-cell.price-cell::part(cell),
65-
#tbl ui5-table-column.price-column::part(column) {
66-
text-align: right;
67-
padding-right: 0.75rem;
68-
}
36+
/* All rows - height */
37+
#tbl ui5-table-row::part(row) {
38+
height: 4rem;
39+
}
40+
/* One row - higher than the rest */
41+
#tbl ui5-table-row#row3::part(row) {
42+
height: 6rem;
43+
}
44+
45+
/* All columns - center both vertically and horizontally */
46+
#tbl ui5-table-column::part(column) {
47+
vertical-align: middle;
48+
text-align: center;
49+
}
50+
51+
/* All cells - center both vertically and horizontally */
52+
#tbl ui5-table-cell::part(cell) {
53+
vertical-align: middle;
54+
text-align: center;
55+
}
56+
57+
/* Title column & cells - left aligned */
58+
#tbl ui5-table-cell.title-cell::part(cell),
59+
#tbl ui5-table-column.title-column::part(column) {
60+
text-align: left;
61+
}
62+
63+
/* Price column & cells - right aligned with some padding */
64+
#tbl ui5-table-cell.price-cell::part(cell),
65+
#tbl ui5-table-column.price-column::part(column) {
66+
text-align: right;
67+
padding-right: 0.75rem;
68+
}
6969
</style>
7070

7171
<body style="background-color: var(--sapBackgroundColor);">
@@ -103,24 +103,30 @@
103103
<ui5-table-cell class="price-cell">956 EUR</ui5-table-cell>
104104
</ui5-table-row>
105105

106-
<ui5-table-row id="row2">
107-
<ui5-table-cell class="title-cell">Notebook Basic 17</ui5-table-cell>
108-
<ui5-table-cell>Very Best Screens</ui5-table-cell>
109-
<ui5-table-cell>40 x 18 x 3 cm</ui5-table-cell>
110-
<ui5-table-cell>4.6 KG</ui5-table-cell>
111-
<ui5-table-cell class="price-cell">1956 EUR</ui5-table-cell>
112-
</ui5-table-row>
113-
114-
<ui5-table-row id="row3">
115-
<ui5-table-cell class="title-cell">Notebook Basic 19</ui5-table-cell>
116-
<ui5-table-cell>Very Best Screens</ui5-table-cell>
117-
<ui5-table-cell>50 x 18 x 3 cm</ui5-table-cell>
118-
<ui5-table-cell>4.9 KG</ui5-table-cell>
119-
<ui5-table-cell class="price-cell">2956 EUR</ui5-table-cell>
120-
</ui5-table-row>
106+
<ui5-table-row id="row2">
107+
<ui5-table-cell class="title-cell">Notebook Basic 17</ui5-table-cell>
108+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
109+
<ui5-table-cell>40 x 18 x 3 cm</ui5-table-cell>
110+
<ui5-table-cell>4.6 KG</ui5-table-cell>
111+
<ui5-table-cell class="price-cell">1956 EUR</ui5-table-cell>
112+
</ui5-table-row>
113+
114+
<ui5-table-row id="row3">
115+
<ui5-table-cell class="title-cell">Notebook Basic 19</ui5-table-cell>
116+
<ui5-table-cell>Very Best Screens</ui5-table-cell>
117+
<ui5-table-cell>50 x 18 x 3 cm</ui5-table-cell>
118+
<ui5-table-cell>4.9 KG</ui5-table-cell>
119+
<ui5-table-cell class="price-cell">2956 EUR</ui5-table-cell>
120+
</ui5-table-row>
121121

122122
</ui5-table>
123123

124+
<script>
125+
document.getElementById("tbl").addEventListener("rowClick", function(event) {
126+
console.log("Row click: ", event.detail.row);
127+
});
128+
</script>
129+
124130
</body>
125131

126132
</html>

0 commit comments

Comments
 (0)