From 38e7df572de16e245970d79e41f871fa9284b7d6 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 30 Mar 2021 11:27:23 +0300
Subject: [PATCH] Refactor #1920 - For TriStateCheckbox

---
 .../tristatecheckbox/TriStateCheckbox.d.ts    |  1 +
 .../tristatecheckbox/TriStateCheckbox.js      | 27 ++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/tristatecheckbox/TriStateCheckbox.d.ts b/src/components/tristatecheckbox/TriStateCheckbox.d.ts
index adef62d9ba..ba58fa3bda 100644
--- a/src/components/tristatecheckbox/TriStateCheckbox.d.ts
+++ b/src/components/tristatecheckbox/TriStateCheckbox.d.ts
@@ -3,6 +3,7 @@ import TooltipOptions from '../tooltip/TooltipOptions';
 
 interface TriStateCheckboxProps {
     id?: string;
+    inputRef?: any;
     inputId?: string;
     value?: boolean | null;
     name?: string;
diff --git a/src/components/tristatecheckbox/TriStateCheckbox.js b/src/components/tristatecheckbox/TriStateCheckbox.js
index 83960f09b9..c748156dc3 100644
--- a/src/components/tristatecheckbox/TriStateCheckbox.js
+++ b/src/components/tristatecheckbox/TriStateCheckbox.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 TriStateCheckbox extends Component {
 
     static defaultProps = {
         id: null,
+        inputRef: null,
         inputId: null,
         value: null,
         name: null,
@@ -21,6 +22,7 @@ export class TriStateCheckbox extends Component {
 
     static propTypes = {
         id: PropTypes.string,
+        inputRef: PropTypes.any,
         inputId: PropTypes.string,
         value: PropTypes.bool,
         name: PropTypes.string,
@@ -43,12 +45,14 @@ export class TriStateCheckbox extends Component {
         this.onClick = this.onClick.bind(this);
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onBlur.bind(this);
+
+        this.inputRef = createRef(this.props.inputRef);
     }
 
     onClick(event) {
         if (!this.props.disabled) {
             this.toggle(event);
-            this.inputEL.focus();
+            this.inputRef.current.focus();
         }
     }
 
@@ -84,7 +88,22 @@ export class TriStateCheckbox extends Component {
         this.setState({ focused: false });
     }
 
+    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.props.disabled) {
             this.renderTooltip();
         }
@@ -129,8 +148,8 @@ export class TriStateCheckbox extends Component {
         return (
             <div ref={el => this.element = el} id={this.props.id} className={containerClass} style={this.props.style} onClick={this.onClick}>
                 <div className="p-hidden-accessible">
-                    <input ref={(el) => this.inputEL = el} type="checkbox" aria-labelledby={this.props.ariaLabelledBy} id={this.props.inputId} name={this.props.name}
-                           onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} />
+                    <input ref={this.inputRef} type="checkbox" aria-labelledby={this.props.ariaLabelledBy} id={this.props.inputId} name={this.props.name}
+                           onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} defaultChecked={this.props.value} />
                 </div>
                 <div className={boxClass} ref={el => this.box = el} role="checkbox" aria-checked={this.props.value === true}>
                     <span className={iconClass}></span>