Skip to content

Commit f69f42c

Browse files
ilhan007ilhan007
authoredNov 1, 2019
fix(ui5-table): fix row navigation and focus handling (#876)
·
v./29.5v0.0.0-7b49a7ff1
1 parent 5ca3280 commit f69f42c

18 files changed

+90
-20
lines changed
 

‎packages/main/src/Table.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<table border="0" cellspacing="0" cellpadding="0">
22

33
<thead>
4-
<tr class="ui5-table-header-row" style="height: 48px">
4+
<tr id="{{_id}}-columnHeader" class="ui5-table-header-row" tabindex="0" style="height: 48px" @click="{{onColumnHeaderClick}}">
55
{{#each visibleColumns}}
66
<slot name="{{this._individualSlot}}"></slot>
77
{{/each}}

‎packages/main/src/Table.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,8 @@ class Table extends UI5Element {
166166
this._itemNavigation = new ItemNavigation(this);
167167

168168
this._itemNavigation.getItemsCallback = function getItemsCallback() {
169-
return this.rows;
169+
const columnHeader = this.getColumnHeader();
170+
return columnHeader ? [columnHeader, ...this.rows] : this.rows;
170171
}.bind(this);
171172

172173
this.fnOnRowFocused = this.onRowFocused.bind(this);
@@ -210,6 +211,15 @@ class Table extends UI5Element {
210211
}
211212
}
212213

214+
onColumnHeaderClick(event) {
215+
this.getColumnHeader().focus();
216+
this._itemNavigation.update(event.target);
217+
}
218+
219+
getColumnHeader() {
220+
return this.getDomRef() && this.getDomRef().querySelector(`#${this._id}-columnHeader`);
221+
}
222+
213223
popinContent(_event) {
214224
const clientRect = this.getDomRef().getBoundingClientRect();
215225
const tableWidth = clientRect.width;

‎packages/main/src/TableCell.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<td>
1+
<td @click="{{_onclick}}" tabindex="-1">
22
<slot></slot>
33
</td>

‎packages/main/src/TableCell.js

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

8488
TableCell.define();

‎packages/main/src/TableRow.hbs

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
<tr class="ui5-table-row-root">
2-
{{#each visibleCells}}
3-
<slot name="{{this._individualSlot}}"></slot>
4-
{{/each}}
1+
<tr
2+
class="ui5-table-row-root"
3+
tabindex="{{_tabIndex}}"
4+
@focusin="{{_onfocusin}}"
5+
@ui5-_cellclick="{{_oncellclick}}"
6+
data-sap-focus-ref>
7+
{{#each visibleCells}}
8+
<slot name="{{this._individualSlot}}"></slot>
9+
{{/each}}
510
</tr>
611

712

813
{{#each popinCells}}
9-
<tr class="ui5-table-popin-row">
14+
<tr class="ui5-table-popin-row" @ui5-_cellclick="{{_oncellclick}}">
1015
<td colspan="{{../visibleCellsCount}}">
11-
1216
<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
1317
<div>
1418
<slot name="{{this.cell._individualSlot}}"></slot>

‎packages/main/src/TableRow.js

+27-4
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ const metadata = {
5656
* @public
5757
*/
5858
class TableRow extends UI5Element {
59+
constructor() {
60+
super();
61+
this.fnOnCellClick = this._oncellclick.bind(this);
62+
}
63+
5964
static get metadata() {
6065
return metadata;
6166
}
@@ -72,6 +77,28 @@ class TableRow extends UI5Element {
7277
return TableRowTemplate;
7378
}
7479

80+
_onfocusin(event, forceSelfFocus = false) {
81+
if (forceSelfFocus || this._getActiveElementTagName() === "ui5-table-cell") {
82+
this.getDomRef().focus();
83+
}
84+
85+
this.fireEvent("_focused", event);
86+
}
87+
88+
_oncellclick(event) {
89+
if (this._getActiveElementTagName() === "body") {
90+
// If the user clickes on non-focusable element within the ui5-table-cell,
91+
// the focus goes to the body, se we have to bring it back to the row.
92+
// If the user clicks on input, button or similar clickable element,
93+
// the focus remains on that element.
94+
this._onfocusin(event, true /* force row focus */);
95+
}
96+
}
97+
98+
_getActiveElementTagName() {
99+
return document.activeElement.localName.toLocaleLowerCase();
100+
}
101+
75102
onBeforeRendering() {
76103
this.visibleCells = [];
77104
this.popinCells = [];
@@ -128,10 +155,6 @@ class TableRow extends UI5Element {
128155
get visibleCellsCount() {
129156
return this.visibleCells.length;
130157
}
131-
132-
onfocusin(event) {
133-
this.fireEvent("_focused", event);
134-
}
135158
}
136159

137160
TableRow.define();

‎packages/main/src/themes/Table.css

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ table {
1616
font-size: var(--sapMFontMediumSize);
1717
}
1818

19+
.ui5-table-header-row:focus {
20+
outline: var(--ui5_table_header_row_outline_width) dotted var(--sapUiContentFocusColor);
21+
outline-offset: -0.125rem;
22+
}
23+
1924
tr {
2025
height: 3rem;
2126
}

‎packages/main/src/themes/TableRow.css

+5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
border-top: 1px solid var(--sapUiListBorderColor);
88
}
99

10+
.ui5-table-row-root:focus {
11+
outline: var(--ui5_table_row_outline_width) dotted var(--sapUiContentFocusColor);
12+
outline-offset: -0.125rem;
13+
}
14+
1015
.ui5-table-popin-row td {
1116
padding: .25rem;
1217
padding-left: 1rem;

‎packages/main/src/themes/base/Table-parameters.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
:root {}
1+
:root {
2+
--ui5_table_header_row_outline_width: 1px;
3+
}

‎packages/main/src/themes/base/TableRow-parameters.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--ui5_table_row_outline_width: 1px;
3+
}

‎packages/main/src/themes/sap_belize/TableRow-parameters.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "../base/TableRow-parameters.css";

‎packages/main/src/themes/sap_belize/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
@import "./Switch-parameters.css";
2525
@import "./TabContainer-parameters.css";
2626
@import "./Table-parameters.css";
27+
@import "./TableRow-parameters.css";
2728
@import "./TextArea-parameters.css";
2829
@import "./TimelineItem-parameters.css";
2930
@import "./ToggleButton-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/Table-parameters.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
@import "../base/Table-parameters.css";
1+
@import "../base/Table-parameters.css";
2+
3+
:root {
4+
--ui5_table_header_row_outline_width: 0.125rem;
5+
}

‎packages/main/src/themes/sap_belize_hcb/TableRow-parameters.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../base/TableRow-parameters.css";
2+
3+
:root {
4+
--ui5_table_row_outline_width: 0.125rem;
5+
}

‎packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
@import "./Switch-parameters.css";
2424
@import "./TabContainer-parameters.css";
2525
@import "./Table-parameters.css";
26+
@import "./TableRow-parameters.css";
2627
@import "./TextArea-parameters.css";
2728
@import "./TimelineItem-parameters.css";
2829
@import "./ToggleButton-parameters.css";

‎packages/main/src/themes/sap_fiori_3/TableRow-parameters.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "../base/TableRow-parameters.css";

‎packages/main/src/themes/sap_fiori_3/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,6 @@
2727
@import "./YearPicker-parameters.css";
2828
@import "./CalendarHeader-parameters.css";
2929
@import "./Table-parameters.css";
30+
@import "./TableRow-parameters.css";
3031
@import "./Token-parameters.css";
3132
@import "./MultiComboBox-parameters.css";

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -179,14 +179,14 @@
179179
</div>
180180
</ui5-table-column>
181181

182-
<ui5-table-row>
183-
<ui5-table-cell>Dublin</ui5-table-cell>
182+
<ui5-table-row >
183+
<ui5-table-cell><span>Dublin</span> <ui5-button>click</ui5-button></ui5-table-cell>
184184
</ui5-table-row>
185185
<ui5-table-row>
186-
<ui5-table-cell>Sofia</ui5-table-cell>
186+
<ui5-table-cell><ui5-label for="myInput">Sofia</ui5-label> <ui5-input id="myInput">click</ui5-input></ui5-table-cell>
187187
</ui5-table-row>
188-
<ui5-table-row>
189-
<ui5-table-cell>London</ui5-table-cell>
188+
<ui5-table-row >
189+
<ui5-table-cell>London <input /> </ui5-table-cell>
190190
</ui5-table-row>
191191
</ui5-table>
192192

0 commit comments

Comments
 (0)
Please sign in to comment.