diff --git a/src/components/datatable/RowCheckbox.js b/src/components/datatable/RowCheckbox.js index a6ae9f4291..f0f2962fcd 100644 --- 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
-
- -
-
+ return ( +
+
-
; +
+ ); } }