Fixed #605 - Keyboard Support for Table Row Selection

primefaces · Nov 7, 2018 · 6dda9f2 · 6dda9f2
1 parent edaec90
commit 6dda9f2
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 4 deletions.
diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js
@@ -16,6 +16,7 @@ export class BodyRow extends Component {
         this.onDragOver = this.onDragOver.bind(this);
         this.onDragLeave = this.onDragLeave.bind(this);
         this.onDrop = this.onDrop.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
     }
 
     onClick(event) {
@@ -97,6 +98,69 @@ export class BodyRow extends Component {
         event.preventDefault();
     }
 
+    onKeyDown(event) {
+        if (this.props.selectionMode) {
+            const row = event.target;
+
+            switch (event.which) {
+                //down arrow
+                case 40:
+                    let nextRow = this.findNextSelectableRow(row);
+                    if (nextRow) {
+                        nextRow.focus();
+                    }
+
+                    event.preventDefault();
+                break;
+
+                //up arrow
+                case 38:
+                    let prevRow = this.findPrevSelectableRow(row);
+                    if (prevRow) {
+                        prevRow.focus();
+                    }
+
+                    event.preventDefault();
+                break;
+
+                //enter
+                case 13:
+                    this.onClick(event);
+                break;
+
+                default:
+                    //no op
+                break;
+            }
+        }
+    }
+
+    findNextSelectableRow(row) {
+        let nextRow = row.nextElementSibling;
+        if (nextRow) {
+            if (DomHandler.hasClass(nextRow, 'p-datatable-row'))
+                return nextRow;
+            else
+                return this.findNextSelectableRow(nextRow);
+        }
+        else {
+            return null;
+        }
+    }
+
+    findPrevSelectableRow(row) {
+        let prevRow = row.previousElementSibling;
+        if (prevRow) {
+            if (DomHandler.hasClass(prevRow, 'p-datatable-row'))
+                return prevRow;
+            else
+                return this.findPrevSelectableRow(prevRow);
+        }
+        else {
+            return null;
+        }
+    }
+
     render() {
         let columns = React.Children.toArray(this.props.children);
         let conditionalStyles = {
@@ -108,7 +172,7 @@ export class BodyRow extends Component {
             let rowClassNameCondition = this.props.rowClassName(this.props.rowData);
             conditionalStyles = {...conditionalStyles, ...rowClassNameCondition};
         }
-        let className = classNames(conditionalStyles);
+        let className = classNames('p-datatable-row', conditionalStyles);
         let hasRowSpanGrouping = this.props.rowGroupMode === 'rowspan';
         let cells = [];
 
@@ -131,8 +195,8 @@ export class BodyRow extends Component {
         }
 
         return (
-            <tr ref={(el) => {this.container = el;}} className={className} onClick={this.onClick} onDoubleClick={this.onDoubleClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick} onMouseDown={this.onMouseDown}
-                onDragStart={this.props.onDragStart} onDragEnd={this.onDragEnd} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop} style={{height: this.props.virtualRowHeight}}>
+            <tr tabIndex={this.props.selectionMode ? '0' : null} ref={(el) => {this.container = el;}} className={className} onClick={this.onClick} onDoubleClick={this.onDoubleClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick} onMouseDown={this.onMouseDown}
+                onDragStart={this.props.onDragStart} onDragEnd={this.onDragEnd} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop} style={{height: this.props.virtualRowHeight}} onKeyDown={this.onKeyDown}>
                 {cells}
             </tr>
         );

diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
@@ -441,7 +441,7 @@ export class TableBody extends Component {
 
                 //row content
                 let bodyRow = <BodyRow key={i} value={this.props.value} rowData={rowData} rowIndex={i} onClick={this.onRowClick} onDoubleClick={this.props.onRowDoubleClick} onRightClick={this.onRowRightClick} onTouchEnd={this.onRowTouchEnd} 
-                            onRowToggle={this.onRowToggle} expanded={expanded} responsive={this.props.responsive}
+                            onRowToggle={this.onRowToggle} expanded={expanded} responsive={this.props.responsive} selectionMode={this.props.selectionMode}
                             onRadioClick={this.onRadioClick} onCheckboxClick={this.onCheckboxClick} selected={selected} contextMenuSelected={contextMenuSelected} rowClassName={this.props.rowClassName}
                             sortField={this.props.sortField} rowGroupMode={this.props.rowGroupMode} groupRowSpan={groupRowSpan}
                             onDragStart={(e) => this.onRowDragStart(e, i)} onDragEnd={this.onRowDragEnd} onDragOver={(e) => this.onRowDragOver(e, i)} onDragLeave={this.onRowDragLeave}