Merge pull request #96 from lambda-curry/mohsen/360t-220-add-ref-support-to-textfield-component-in-forms-repo

Author: jaruesink

apps/docs/src/remix-hook-form/text-field.stories.tsx

@@ -2,6 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
+import { useRef } from 'react';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { expect, userEvent } from 'storybook/test';
@@ -38,6 +39,8 @@ const ControlledTextFieldExample = () => {
     },
   });
 
+  const ref = useRef<HTMLInputElement>(null);
+
   return (
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
@@ -58,6 +61,12 @@ const ControlledTextFieldExample = () => {
             suffix="cm"
           />
 
+          <div className="flex gap-2 items-end">
+            <TextField name="refExample" label="Ref Example" placeholder="Enter something, this has a ref" ref={ref} />
+
+            <Button onClick={() => ref.current?.focus()}>Focus the input</Button>
+          </div>
+
           <Button type="submit" className="mt-4">
             Submit
           </Button>

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdacurry/forms",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/components/src/remix-hook-form/text-field.tsx

@@ -1,11 +1,12 @@
+import type * as React from 'react';
 import { TextField as BaseTextField, type TextInputProps as BaseTextFieldProps } from '../ui/text-field';
 import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
 import { useRemixFormContext } from 'remix-hook-form';
 
 export type TextFieldProps = Omit<BaseTextFieldProps, 'control'>;
 
-export function TextField(props: TextFieldProps) {
+export const TextField = function RemixTextField(props: TextFieldProps & { ref?: React.Ref<HTMLInputElement> }) {
   const { control } = useRemixFormContext();
 
   // Merge the provided components with the default form components
@@ -15,11 +16,13 @@ export function TextField(props: TextFieldProps) {
     FormDescription,
     FormMessage,
   };
-  
+
   const components = {
     ...defaultComponents,
     ...props.components,
   };
 
   return <BaseTextField control={control} components={components} {...props} />;
-}
+};
+
+TextField.displayName = 'RemixTextField';

packages/components/src/ui/text-field.tsx

@@ -57,14 +57,14 @@ export interface TextInputProps extends Omit<InputProps, 'prefix' | 'suffix'> {
   label?: string;
   description?: string;
   components?: Partial<FieldComponents> & {
-    Input?: React.ComponentType<InputProps>;
+    Input?: React.ComponentType<InputProps & React.RefAttributes<HTMLInputElement>>;
   };
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   className?: string;
 }
 
-export const TextField = ({
+export const TextField = function TextField({
   control,
   name,
   label,
@@ -73,8 +73,9 @@ export const TextField = ({
   components,
   prefix,
   suffix,
+  ref,
   ...props
-}: TextInputProps) => {
+}: TextInputProps & { ref?: React.Ref<HTMLInputElement> }) {
   // Use the custom Input component if provided, otherwise use the default TextInput
   const InputComponent = components?.Input || TextInput;
 
@@ -98,6 +99,7 @@ export const TextField = ({
                 <InputComponent
                   {...field}
                   {...props}
+                  ref={ref}
                   className={cn('focus-visible:ring-0 focus-visible:ring-offset-0 border-input', {
                     'rounded-l-none border-l-0': prefix,
                     'rounded-r-none border-r-0': suffix,

packages/components/src/ui/text-input.tsx

@@ -1,11 +1,14 @@
 import type * as React from 'react';
 import { cn } from './utils';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  ref?: React.Ref<HTMLInputElement>;
+}
 
-function TextInput({ className, type, ...props }: InputProps) {
+function TextInput({ className, type, ref, ...props }: InputProps) {
   return (
     <input
+      ref={ref}
       type={type}
       className={cn(
         'flex h-10 w-full text-base sm:text-sm rounded-md border border-input bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
@@ -17,4 +20,6 @@ function TextInput({ className, type, ...props }: InputProps) {
   );
 }
 
+TextInput.displayName = 'TextInput';
+
 export { TextInput };