Fixed #1005 - Add keyboard support to DataTable with Checkbox selection

primefaces · Sep 9, 2019 · dbcf1d5 · dbcf1d5
1 parent 1025dde
commit dbcf1d5
Showing 1 changed file with 25 additions and 4 deletions.
diff --git a/src/components/datatable/RowCheckbox.js b/src/components/datatable/RowCheckbox.js
@@ -18,7 +18,12 @@ export class RowCheckbox extends Component {
 
     constructor(props) {
         super(props);
+        this.state = {};
+
         this.onClick = this.onClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
     }
 
     onClick(event) {
@@ -30,16 +35,32 @@ export class RowCheckbox extends Component {
             })
         }
     }
+
+    onFocus() {
+        this.setState({focused: true});
+    }
+
+    onBlur() {
+        this.setState({focused: false});
+    }
+
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            this.onClick(event);
+            event.preventDefault();
+        }
+    }
 
     render() {
-        let className = classNames('p-checkbox-box p-component', {'p-highlight': this.props.selected, 'p-disabled': this.props.disabled});
+        let className = classNames('p-checkbox-box p-component', {'p-highlight': this.props.selected, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused});
         let iconClassName = classNames('p-checkbox-icon p-clickable', {'pi pi-check': this.props.selected});
 
-        return <div className="p-checkbox p-component">
+        return <div className="p-checkbox p-component" onClick={this.onClick}>
                  <div className="p-hidden-accessible">
-                    <input type="checkbox" />
+                    <input type="checkbox" defaultChecked={this.props.selected} disabled={this.props.disabled} 
+                        aria-checked={this.props.selected} onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur}/>
                 </div>
-                <div className={className} onClick={this.onClick}>
+                <div className={className}>
                     <span className={iconClassName}></span>
                 </div>
             </div>;