refactored the Refs use in Dropdown

Author: Silviu Avram

src/components/Dropdown/Dropdown.tsx

@@ -23,6 +23,7 @@ import {
   RenderResultConfig,
   customPropTypes,
   commonPropTypes,
+  handleRef,
 } from '../../lib'
 import keyboardKey from 'keyboard-key'
 import List from '../List/List'
@@ -133,9 +134,9 @@ export default class Dropdown extends AutoControlledComponent<
   Extendable<DropdownProps>,
   DropdownState
 > {
-  private inputNode: HTMLElement
-  private listNode: HTMLElement
   private buttonRef = React.createRef<HTMLElement>()
+  private inputRef = React.createRef<HTMLElement>()
+  private listRef = React.createRef<HTMLElement>()
 
   static displayName = 'Dropdown'
 
@@ -224,7 +225,7 @@ export default class Dropdown extends AutoControlledComponent<
           getA11yStatusMessage={getA11yStatusMessage}
           onStateChange={changes => {
             if (changes.isOpen && !search) {
-              this.listNode.focus()
+              this.listRef.current.focus()
             }
           }}
         >
@@ -330,9 +331,7 @@ export default class Dropdown extends AutoControlledComponent<
         placeholder: noPlaceholder ? '' : placeholder,
         hasToggleButton: !!toggleButton,
         variables,
-        inputRef: (inputNode: HTMLElement) => {
-          this.inputNode = inputNode
-        },
+        inputRef: this.inputRef,
       },
       overrideProps: (predefinedProps: DropdownSearchInputProps) =>
         this.handleSearchInputOverrides(
@@ -389,9 +388,9 @@ export default class Dropdown extends AutoControlledComponent<
     const { innerRef, ...accessibilityMenuPropsRest } = accessibilityMenuProps
     return (
       <Ref
-        innerRef={(listNode: HTMLElement) => {
-          this.listNode = listNode
-          innerRef(listNode)
+        innerRef={(listElement: HTMLElement) => {
+          handleRef(this.listRef, listElement)
+          handleRef(innerRef, listElement)
         }}
       >
         <List
@@ -485,7 +484,7 @@ export default class Dropdown extends AutoControlledComponent<
       case Downshift.stateChangeTypes.blurButton:
         // Downshift closes the list by default on trigger blur. It does not support the case when dropdown is
         // single selection and focuses list on trigger click/up/down/space/enter. Treating that here.
-        if (state.isOpen && document.activeElement === this.listNode) {
+        if (state.isOpen && document.activeElement === this.listRef.current) {
           return {} // won't change state in this case.
         }
       default:
@@ -645,7 +644,7 @@ export default class Dropdown extends AutoControlledComponent<
   }
 
   private handleContainerClick = (isOpen: boolean) => {
-    !isOpen && this.inputNode.focus()
+    !isOpen && this.inputRef.current.focus()
   }
 
   private handleListKeyDown = (
@@ -694,7 +693,7 @@ export default class Dropdown extends AutoControlledComponent<
 
   private handleSelectedItemRemove(e: React.SyntheticEvent, item: ShorthandValue) {
     this.removeItemFromValue(item)
-    this.inputNode.focus()
+    this.inputRef.current.focus()
     e.stopPropagation()
   }
 

src/components/Dropdown/DropdownSearchInput.tsx

@@ -10,12 +10,9 @@ import Input from '../Input/Input'
 export interface DropdownSearchInputProps extends UIComponentProps<DropdownSearchInputProps> {
   /** Informs the search input about an existing toggle button. */
   hasToggleButton?: boolean
-  /**
-   * Ref callback with an input DOM node.
-   *
-   * @param {JSX.Element} node - input DOM node.
-   */
-  inputRef?: (inputNode: HTMLElement) => void
+
+  /** Ref for input DOM node. */
+  inputRef?: React.Ref<HTMLElement>
 
   /**
    * Called on input element focus.
@@ -71,18 +68,14 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
     accessibilityInputProps: PropTypes.object,
     accessibilityComboboxProps: PropTypes.object,
     hasToggleButton: PropTypes.bool,
-    inputRef: PropTypes.func,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onFocus: PropTypes.func,
     onInputBlur: PropTypes.func,
     onInputKeyDown: PropTypes.func,
     onKeyUp: PropTypes.func,
     placeholder: PropTypes.string,
   }
 
-  private handleInputRef = (inputNode: HTMLElement) => {
-    _.invoke(this.props, 'inputRef', inputNode)
-  }
-
   private handleFocus = (e: React.SyntheticEvent) => {
     _.invoke(this.props, 'onFocus', e, this.props)
   }
@@ -100,10 +93,15 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
   }
 
   public renderComponent({ rest, styles }: RenderResultConfig<DropdownSearchInputProps>) {
-    const { accessibilityComboboxProps, accessibilityInputProps, placeholder } = this.props
+    const {
+      accessibilityComboboxProps,
+      accessibilityInputProps,
+      inputRef,
+      placeholder,
+    } = this.props
     return (
       <Input
-        inputRef={this.handleInputRef}
+        inputRef={inputRef}
         onFocus={this.handleFocus}
         onKeyUp={this.handleKeyUp}
         wrapper={{

src/components/Input/Input.tsx

@@ -11,6 +11,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  handleRef,
 } from '../../lib'
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
 import Icon from '../Icon/Icon'
@@ -50,12 +51,8 @@ export interface InputProps extends UIComponentProps, ChildrenComponentProps {
   /** The HTML input type. */
   type?: string
 
-  /**
-   * Ref callback with an input DOM node.
-   *
-   * @param {JSX.Element} node - input DOM node.
-   */
-  inputRef?: (node: HTMLElement) => void
+  /** Ref for input DOM node. */
+  inputRef?: React.Ref<HTMLElement>
 
   /** The value of the input. */
   value?: React.ReactText
@@ -77,7 +74,7 @@ export interface InputState {
  *  - if input is search, then use "role='search'"
  */
 class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState> {
-  private inputDomElement: HTMLInputElement
+  private inputRef = React.createRef<HTMLElement>()
 
   static className = 'ui-input'
 
@@ -93,7 +90,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     icon: customPropTypes.itemShorthand,
     iconPosition: PropTypes.oneOf(['start', 'end']),
     input: customPropTypes.itemShorthand,
-    inputRef: PropTypes.func,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     inline: PropTypes.bool,
     onChange: PropTypes.func,
     type: PropTypes.string,
@@ -116,7 +113,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     styles,
     variables,
   }: RenderResultConfig<InputProps>) {
-    const { className, input, type, wrapper } = this.props
+    const { className, input, inputRef, type, wrapper } = this.props
     const { value = '' } = this.state
     const [htmlInputProps, rest] = partitionHTMLProps(restProps)
 
@@ -125,7 +122,12 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
         className: cx(Input.className, className),
         children: (
           <>
-            <Ref innerRef={this.handleInputRef}>
+            <Ref
+              innerRef={(inputElement: HTMLElement) => {
+                handleRef(this.inputRef, inputElement)
+                handleRef(inputRef, inputElement)
+              }}
+            >
               {Slot.create(input || type, {
                 defaultProps: {
                   ...htmlInputProps,
@@ -155,16 +157,10 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     })
   }
 
-  private handleInputRef = (inputNode: HTMLElement) => {
-    this.inputDomElement = inputNode as HTMLInputElement
-
-    _.invoke(this.props, 'inputRef', inputNode)
-  }
-
   private handleIconOverrides = predefinedProps => ({
     onClick: (e: React.SyntheticEvent) => {
       this.handleOnClear()
-      this.inputDomElement.focus()
+      this.inputRef.current.focus()
       _.invoke(predefinedProps, 'onClick', e, this.props)
     },
     ...(predefinedProps.onClick && { tabIndex: '0' }),