Fixed #2522 - DataTable, TreeTable | Checkbox and RadioButton Focus M…

…issing on Material
primefaces · Dec 14, 2021 · 49b47e7 · 49b47e7
1 parent c2c2725
commit 49b47e7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js
@@ -42,13 +42,14 @@ export class RowCheckbox extends Component {
     }
 
     render() {
-        const className = classNames('p-checkbox-box p-component', { 'p-highlight': this.props.checked, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused });
+        const className = classNames('p-checkbox p-component', {'p-checkbox-focused': this.state.focused} )
+        const boxClassName = classNames('p-checkbox-box p-component', { 'p-highlight': this.props.checked, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused});
         const iconClassName = classNames('p-checkbox-icon', { 'pi pi-check': this.props.checked });
         const tabIndex = this.props.disabled ? null : '0';
 
         return (
-            <div className="p-checkbox p-component" onClick={this.onClick}>
-                <div className={className} role="checkbox" aria-checked={this.props.checked} tabIndex={tabIndex}
+            <div className={className} onClick={this.onClick}>
+                <div className={boxClassName} role="checkbox" aria-checked={this.props.checked} tabIndex={tabIndex}
                     onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur}>
                     <span className={iconClassName}></span>
                 </div>

diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js
@@ -48,16 +48,17 @@ export class RowRadioButton extends Component {
     }
 
     render() {
-        const className = classNames('p-radiobutton-box p-component', { 'p-highlight': this.props.checked, 'p-focus': this.state.focused, 'p-disabled': this.props.disabled });
+        const className = classNames('p-radiobutton p-component', { 'p-radiobutton-focused': this.state.focused });
+        const boxClassName = classNames('p-radiobutton-box p-component', { 'p-highlight': this.props.checked, 'p-focus': this.state.focused, 'p-disabled': this.props.disabled });
         const name = `${this.props.tableSelector}_dt_radio`;
 
         return (
-            <div className="p-radiobutton p-component">
+            <div className={className}>
                 <div className="p-hidden-accessible">
                     <input name={name} ref={(el) => this.input = el} type="radio" checked={this.props.checked}
                         onFocus={this.onFocus} onBlur={this.onBlur} onChange={this.onChange} onKeyDown={this.onKeyDown} />
                 </div>
-                <div className={className} onClick={this.onClick} role="radio" aria-checked={this.props.checked}>
+                <div className={boxClassName} onClick={this.onClick} role="radio" aria-checked={this.props.checked}>
                     <div className="p-radiobutton-icon"></div>
                 </div>
             </div>

diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
@@ -196,10 +196,12 @@ export class TreeTableRow extends Component {
 
     onCheckboxFocus() {
         DomHandler.addClass(this.checkboxBox, 'p-focus');
+        DomHandler.addClass(this.checkboxRef, 'p-checkbox-focused');
     }
 
     onCheckboxBlur() {
         DomHandler.removeClass(this.checkboxBox, 'p-focus');
+        DomHandler.removeClass(this.checkboxRef, 'p-checkbox-focused');
     }
 
     propagateUp(event) {
@@ -361,7 +363,7 @@ export class TreeTableRow extends Component {
             const icon = classNames('p-checkbox-icon p-c', {'pi pi-check': checked, 'pi pi-minus': partialChecked});
 
             return (
-                <div className="p-checkbox p-treetable-checkbox p-component" onClick={this.onCheckboxChange} role="checkbox" aria-checked={checked}>
+                <div className="p-checkbox p-treetable-checkbox p-component" ref={el => this.checkboxRef = el} onClick={this.onCheckboxChange} role="checkbox" aria-checked={checked}>
                     <div className="p-hidden-accessible">
                         <input type="checkbox" onFocus={this.onCheckboxFocus} onBlur={this.onCheckboxBlur} />
                     </div>