From 7cfc2c1708324ca1d1039ef7e806f4a75636c145 Mon Sep 17 00:00:00 2001
From: Tanner Ricks <182143365+tanner-ricks@users.noreply.github.com>
Date: Thu, 17 Oct 2024 15:10:42 -0500
Subject: [PATCH] [TextInput] Certain props should be optional (#381)

[Short description explaining the high-level reason for the pull
request]

## Changes

- TextInput.tsx: Updated the property typing to fix an issue which
caused properties that should be optional, to be considered mandatory
instead.

## How to test this PR

1. View and verify the the deploy preview
2. Pull **308-ts-error-fix**
3. Run **yarn lint** against the branch
4. Verify that **TextInput.tsx** has no errors
5. Run **yarn test** against the branch and verify that everything
passes
6. Build the package
7. Update the **package.json** in **sbl-frontend** to include
**"design-system-react": "file:./<path-to-package.tgz>/package.tgz"**
8. Run **yarn install**
9. Pull **986-default-max-length** in **sbl-frontend**
10. Verify that **TextInput.tsx** in **sbl-frontend** has no errors
---
 src/components/TextInput/TextInput.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index a70d4f0a..d5f2d2b9 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import type { Ref } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { forwardRef, type ReactNode } from 'react';
 import type { TextInputStatusType } from './TextInputStatus';
 import { getTextInputStatusClass } from './TextInputStatus';
@@ -20,7 +20,7 @@ interface RequiredTextInputProperties {
   name: string;
 }
 
-interface CustomTextInputProperties {
+interface CustomTextInputProperties extends ComponentPropsWithoutRef<'input'> {
   className?: string;
   inputProps?: JSX.IntrinsicElements['input'];
   inputRef?: TextInputReference;
@@ -30,8 +30,7 @@ interface CustomTextInputProperties {
   isFullWidth?: boolean;
 }
 
-export type OptionalTextInputProperties = CustomTextInputProperties &
-  JSX.IntrinsicElements['input'];
+export type OptionalTextInputProperties = CustomTextInputProperties;
 
 export type TextInputProperties = OptionalTextInputProperties &
   RequiredTextInputProperties;
@@ -39,7 +38,7 @@ export type TextInputProperties = OptionalTextInputProperties &
 /**
  * Source: <a href='https://cfpb.github.io/design-system/components/text-inputs' target='_blank'> https://cfpb.github.io/design-system/components/text-inputs</a>
  */
-export const TextInput = forwardRef(
+export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
   (
     {
       className,
@@ -51,8 +50,8 @@ export const TextInput = forwardRef(
       type = 'text',
       isFullWidth = false,
       ...otherInputProperties
-    }: JSX.IntrinsicElements['input'] & TextInputProperties,
-    reference: Ref<HTMLInputElement>
+    },
+    reference
   ) => {
     const classes = [
       'a-text-input',