Fixed #1817 - Improve checkbox selection on DataTable

primefaces · Mar 5, 2021 · 9d8df68 · 9d8df68
1 parent 79e7626
commit 9d8df68
Showing 1 changed file with 22 additions and 18 deletions.
diff --git a/src/components/datatable/RowCheckbox.js b/src/components/datatable/RowCheckbox.js
@@ -29,42 +29,46 @@ export class RowCheckbox extends Component {
     }
 
     onClick(event) {
-        if(this.props.onClick && !this.props.disabled) {
-            this.props.onClick({
-                originalEvent: event,
-                data: this.props.rowData,
-                checked: this.props.selected
-            })
+        if (!this.props.disabled) {
+            this.setState({ focused: true });
+
+            if (this.props.onClick) {
+                this.props.onClick({
+                    originalEvent: event,
+                    data: this.props.rowData,
+                    checked: this.props.selected
+                });
+            }
         }
     }
 
     onFocus() {
-        this.setState({focused: true});
+        this.setState({ focused: true });
     }
 
     onBlur() {
-        this.setState({focused: false});
+        this.setState({ focused: false });
     }
 
     onKeyDown(event) {
-        if (event.key === 'Enter') {
+        if (event.code === 'Space') {
             this.onClick(event);
             event.preventDefault();
         }
     }
 
     render() {
-        let className = classNames('p-checkbox-box p-component p-clickable', {'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});
+        const className = classNames('p-checkbox-box p-component p-clickable', { 'p-highlight': this.props.selected, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused });
+        const iconClassName = classNames('p-checkbox-icon p-clickable', { 'pi pi-check': this.props.selected });
+        const tabIndex = this.props.disabled ? null : '0';
 
-        return <div className="p-checkbox p-component">
-                 <div className="p-hidden-accessible">
-                    <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} role="checkbox" aria-checked={this.props.selected}>
+        return (
+            <div className="p-checkbox p-component" onClick={this.onClick}>
+                <div className={className} role="checkbox" aria-checked={this.props.selected} tabIndex={tabIndex}
+                    onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur}>
                     <span className={iconClassName}></span>
                 </div>
-            </div>;
+            </div>
+        );
     }
 }