From 69f2ded93212f5e9ddf4453d39168dc8662192eb Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 30 Mar 2021 11:25:40 +0300
Subject: [PATCH] Refactor #1920 - For Dropdown

---
 src/components/dropdown/Dropdown.d.ts |  1 +
 src/components/dropdown/Dropdown.js   | 30 +++++++++++++++++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index c291ee8bf5..5b51a22303 100755
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -3,6 +3,7 @@ import TooltipOptions from '../tooltip/TooltipOptions';
 
 interface DropdownProps {
     id?: string;
+    inputRef?: any;
     name?: string;
     value?: any;
     options?: any[];
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index 81d2196650..a39ebd2cdb 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
@@ -15,6 +15,7 @@ export class Dropdown extends Component {
 
     static defaultProps = {
         id: null,
+        inputRef: null,
         name: null,
         value: null,
         options: null,
@@ -64,6 +65,7 @@ export class Dropdown extends Component {
 
     static propTypes = {
         id: PropTypes.string,
+        inputRef: PropTypes.any,
         name: PropTypes.string,
         value: PropTypes.any,
         options: PropTypes.array,
@@ -139,7 +141,8 @@ export class Dropdown extends Component {
         this.clear = this.clear.bind(this);
 
         this.id = this.props.id || UniqueComponentId();
-        this.overlayRef = React.createRef();
+        this.overlayRef = createRef();
+        this.inputRef = createRef(this.props.inputRef);
     }
 
     onClick(event) {
@@ -722,7 +725,7 @@ export class Dropdown extends Component {
     }
 
     checkValidity() {
-        return this.nativeSelect.checkValidity();
+        return this.inputRef.current.checkValidity();
     }
 
     getVisibleOptions() {
@@ -758,7 +761,22 @@ export class Dropdown extends Component {
         }
     }
 
+    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.autoFocus && this.focusInput) {
             this.focusInput.focus();
         }
@@ -768,7 +786,7 @@ export class Dropdown extends Component {
         }
 
         this.updateInputField();
-        this.nativeSelect.selectedIndex = 1;
+        this.inputRef.current.selectedIndex = 1;
     }
 
     componentWillUnmount() {
@@ -815,7 +833,7 @@ export class Dropdown extends Component {
         }
 
         this.updateInputField();
-        this.nativeSelect.selectedIndex = 1;
+        this.inputRef.current.selectedIndex = 1;
     }
 
     renderHiddenSelect(selectedOption) {
@@ -824,7 +842,7 @@ export class Dropdown extends Component {
 
         return (
             <div className="p-hidden-accessible p-dropdown-hidden-select">
-                <select ref={(el) => this.nativeSelect = el} required={this.props.required} name={this.props.name} tabIndex={-1} aria-hidden="true">
+                <select ref={this.inputRef} required={this.props.required} name={this.props.name} tabIndex={-1} aria-hidden="true">
                     {placeHolderOption}
                     {option}
                 </select>