fix: Update TextInput ref forwarding (#3011)

trussworks · Aug 26, 2024 · f8ac06d · f8ac06d
1 parent 4513e51
commit f8ac06d
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 38 deletions.
diff --git a/src/components/forms/TextInput/TextInput.test.tsx b/src/components/forms/TextInput/TextInput.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { MutableRefObject, useRef } from 'react'
 import { render } from '@testing-library/react'
 import { TextInput } from './TextInput'
 import { ValidationStatus } from '../../../types/validationStatus'
@@ -59,4 +59,32 @@ describe('TextInput component', () => {
       }
     )
   })
+
+  describe('forwarding refs', () => {
+    beforeEach(() => {
+      vi.clearAllMocks()
+    })
+
+    it('appropriateley renders a ref', () => {
+      let ref
+      const Parent = () => {
+        ref = useRef(null)
+        return (
+          <TextInput
+            id="input-type-text"
+            name="input-type-text"
+            type="text"
+            ref={ref}
+          />
+        )
+      }
+
+      render(<Parent />)
+
+      const parentRef = ref as unknown as MutableRefObject<HTMLElement>
+
+      expect(parentRef.current).toBeInTheDocument()
+      expect(parentRef.current.tagName).toBe('INPUT')
+    })
+  })
 })
diff --git a/src/components/forms/TextInput/TextInput.tsx b/src/components/forms/TextInput/TextInput.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import { ValidationStatus } from '../../../types/validationStatus'
 
@@ -28,43 +28,51 @@ export type OptionalTextInputProps = CustomTextInputProps &
 
 export type TextInputProps = RequiredTextInputProps & OptionalTextInputProps
 
-export const TextInput = ({
-  id,
-  name,
-  type,
-  className,
-  validationStatus,
-  inputSize,
-  inputRef,
-  ...inputProps
-}: TextInputProps): React.ReactElement => {
-  const isError = validationStatus === 'error'
-  const isSuccess = validationStatus === 'success'
-  const isSmall = inputSize === 'small'
-  const isMedium = inputSize === 'medium'
+export const TextInput = forwardRef(
+  (
+    props: TextInputProps,
+    ref: React.ForwardedRef<HTMLInputElement> | undefined
+  ): React.ReactElement => {
+    const {
+      id,
+      name,
+      type,
+      className,
+      validationStatus,
+      inputSize,
+      inputRef,
+      ...inputProps
+    } = props
 
-  const classes = classnames(
-    'usa-input',
-    {
-      'usa-input--error': isError,
-      'usa-input--success': isSuccess,
-      'usa-input--small': isSmall,
-      'usa-input--medium': isMedium,
-    },
-    className
-  )
+    const isError = validationStatus === 'error'
+    const isSuccess = validationStatus === 'success'
+    const isSmall = inputSize === 'small'
+    const isMedium = inputSize === 'medium'
 
-  return (
-    <input
-      data-testid="textInput"
-      className={classes}
-      id={id}
-      name={name}
-      type={type}
-      ref={inputRef}
-      {...inputProps}
-    />
-  )
-}
+    const classes = classnames(
+      'usa-input',
+      {
+        'usa-input--error': isError,
+        'usa-input--success': isSuccess,
+        'usa-input--small': isSmall,
+        'usa-input--medium': isMedium,
+      },
+      className
+    )
+
+    return (
+      <input
+        data-testid="textInput"
+        className={classes}
+        id={id}
+        name={name}
+        type={type}
+        ref={inputRef || ref}
+        {...inputProps}
+      />
+    )
+  }
+)
 
+TextInput.displayName = 'TextInput'
 export default TextInput