Refactor #1920 - For Checkbox

primefaces · Mar 30, 2021 · 1b0338a · 1b0338a
1 parent c9f00b1
commit 1b0338a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/components/checkbox/Checkbox.d.ts b/src/components/checkbox/Checkbox.d.ts
@@ -3,6 +3,7 @@ import TooltipOptions from '../tooltip/TooltipOptions';
 
 interface CheckboxProps {
     id?: string;
+    inputRef?: any;
     inputId?: string;
     value?: any;
     name?: string;

diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import { tip } from '../tooltip/Tooltip';
@@ -7,6 +7,7 @@ export class Checkbox extends Component {
 
     static defaultProps = {
         id: null,
+        inputRef: null,
         inputId: null,
         value: null,
         name: null,
@@ -27,6 +28,7 @@ export class Checkbox extends Component {
 
     static propTypes = {
         id: PropTypes.string,
+        inputRef: PropTypes.any,
         inputId: PropTypes.string,
         value: PropTypes.any,
         name: PropTypes.string,
@@ -55,6 +57,8 @@ export class Checkbox extends Component {
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onBlur.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
+
+        this.inputRef = createRef(this.props.inputRef);
     }
 
     onClick(e) {
@@ -74,14 +78,29 @@ export class Checkbox extends Component {
                 }
             });
 
-            this.input.checked = !this.props.checked;
-            this.input.focus();
+            this.inputRef.current.checked = !this.props.checked;
+            this.inputRef.current.focus();
 
             e.preventDefault();
         }
     }
 
+    updateInputRef() {
+        let ref = this.props.inputRef;
+
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(this.inputRef.current);
+            }
+            else {
+                ref.current = this.inputRef.current;
+            }
+        }
+    }
+
     componentDidMount() {
+        this.updateInputRef();
+
         if (this.props.tooltip) {
             this.renderTooltip();
         }
@@ -95,7 +114,7 @@ export class Checkbox extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        this.input.checked = this.props.checked;
+        this.inputRef.current.checked = this.props.checked;
 
         if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
             if (this.tooltip)
@@ -146,7 +165,7 @@ export class Checkbox extends Component {
         return (
             <div ref={(el) => this.element = el} id={this.props.id} className={containerClass} style={this.props.style} onClick={this.onClick} onContextMenu={this.props.onContextMenu} onMouseDown={this.props.onMouseDown}>
                 <div className="p-hidden-accessible">
-                    <input type="checkbox" aria-labelledby={this.props.ariaLabelledBy} ref={el => this.input = el} id={this.props.inputId} name={this.props.name} tabIndex={this.props.tabIndex} defaultChecked={this.props.checked}
+                    <input ref={this.inputRef} type="checkbox" aria-labelledby={this.props.ariaLabelledBy} id={this.props.inputId} name={this.props.name} tabIndex={this.props.tabIndex} defaultChecked={this.props.checked}
                              onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} readOnly={this.props.readOnly} required={this.props.required}/>
                 </div>
                 <div className={boxClass} ref={el => this.box = el} role="checkbox" aria-checked={this.props.checked}>