diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js index 9d8b7ed314..d8b1d3074f 100644 --- a/src/components/datatable/BodyRow.js +++ b/src/components/datatable/BodyRow.js @@ -27,7 +27,7 @@ export class BodyRow extends Component { } onClick(event) { - if(this.props.onClick) { + if (this.props.onClick) { this.props.onClick({ originalEvent: event, data: this.props.rowData, @@ -107,13 +107,14 @@ export class BodyRow extends Component { onKeyDown(event) { if (this.props.selectionMode) { - const row = event.target; + const row = event.currentTarget; switch (event.which) { //down arrow case 40: let nextRow = this.findNextSelectableRow(row); if (nextRow) { + this.changeTabIndex(row, nextRow); nextRow.focus(); } @@ -124,15 +125,18 @@ export class BodyRow extends Component { case 38: let prevRow = this.findPrevSelectableRow(row); if (prevRow) { + this.changeTabIndex(row, prevRow); prevRow.focus(); } event.preventDefault(); break; - //enter - case 13: + //enter or space + case 13: // @deprecated + case 32: this.onClick(event); + event.preventDefault(); break; default: @@ -142,6 +146,13 @@ export class BodyRow extends Component { } } + changeTabIndex(currentRow, nextRow) { + if (currentRow && nextRow) { + currentRow.tabIndex = -1; + nextRow.tabIndex = 0; + } + } + findNextSelectableRow(row) { let nextRow = row.nextElementSibling; if (nextRow) { @@ -222,6 +233,10 @@ export class BodyRow extends Component { event.preventDefault(); } + getTabIndex() { + return this.props.selectionMode ? (this.props.rowIndex === 0 ? 0 : -1) : null; + } + render() { let columns = React.Children.toArray(this.props.children); let conditionalClassNames = { @@ -237,6 +252,7 @@ export class BodyRow extends Component { let className = classNames(conditionalClassNames); let style = this.props.virtualScroll ? {height: this.props.virtualRowHeight} : {}; let hasRowSpanGrouping = this.props.rowGroupMode === 'rowspan'; + let tabIndex = this.getTabIndex(); let cells = []; for (let i = 0; i < columns.length; i++) { @@ -263,7 +279,7 @@ export class BodyRow extends Component { } return ( -