Fix controlled input transforms

dwene · dwene · commit c16560f0effe · 2026-06-24T08:47:55.000-05:00
diff --git a/apps/docs/src/medusa-forms/ControlledCurrencyInput.stories.tsx b/apps/docs/src/medusa-forms/ControlledCurrencyInput.stories.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ControlledCurrencyInput } from '@lambdacurry/medusa-forms/controlled/ControlledCurrencyInput';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -21,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 interface CurrencyFormData {
-  price: string;
+  price: string | number;
 }
 
 // Base wrapper component for stories
@@ -61,6 +62,55 @@ const CurrencyInputWithHookForm = ({
   );
 };
 
+const CurrencyInputWithRequiredError = () => {
+  const form = useForm<CurrencyFormData>({
+    defaultValues: { price: '' },
+    mode: 'onChange',
+  });
+
+  useEffect(() => {
+    form.trigger('price').then(() => undefined);
+  }, [form]);
+
+  return (
+    <FormProvider {...form}>
+      <div className="w-[400px]">
+        <ControlledCurrencyInput
+          name="price"
+          label="Required price"
+          symbol="$"
+          code="usd"
+          rules={{ required: 'Price is required' }}
+        />
+      </div>
+    </FormProvider>
+  );
+};
+
+const CurrencyInputWithValueAsNumber = () => {
+  const form = useForm<CurrencyFormData>({
+    defaultValues: { price: '' },
+  });
+  const price = form.watch('price');
+
+  return (
+    <FormProvider {...form}>
+      <div className="w-[400px] space-y-4">
+        <ControlledCurrencyInput<CurrencyFormData>
+          name="price"
+          label="Numeric price"
+          symbol="$"
+          code="usd"
+          rules={{ valueAsNumber: true }}
+        />
+        <pre className="rounded bg-gray-100 p-2 text-xs">
+          {JSON.stringify({ value: price, type: typeof price }, null, 2)}
+        </pre>
+      </div>
+    </FormProvider>
+  );
+};
+
 // 1. Different Currency Symbols
 export const USDCurrency: Story = {
   args: {
@@ -194,6 +244,24 @@ export const RequiredFieldValidation: Story = {
   ),
 };
 
+export const RequiredRuleError: Story = {
+  args: {
+    name: 'price',
+    symbol: '$',
+    code: 'usd',
+  },
+  render: () => <CurrencyInputWithRequiredError />,
+};
+
+export const ValueAsNumber: Story = {
+  args: {
+    name: 'price',
+    symbol: '$',
+    code: 'usd',
+  },
+  render: () => <CurrencyInputWithValueAsNumber />,
+};
+
 const customValidationSchema = z.object({
   price: z.string().refine((val) => {
     const num = Number.parseFloat(val);
diff --git a/apps/docs/src/medusa-forms/ControlledInput.stories.tsx b/apps/docs/src/medusa-forms/ControlledInput.stories.tsx
@@ -14,10 +14,18 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+interface InputFormData {
+  username: string;
+  quantity: number | string;
+  optionalAmount: number | null | string;
+}
+
 const ControlledInputWithHookForm = () => {
-  const form = useForm({
+  const form = useForm<InputFormData>({
     defaultValues: {
       username: '',
+      quantity: '',
+      optionalAmount: '',
     },
   });
 
@@ -30,6 +38,62 @@ const ControlledInputWithHookForm = () => {
   );
 };
 
+const NumberInputWithHookForm = () => {
+  const form = useForm<InputFormData>({
+    defaultValues: {
+      username: '',
+      quantity: '',
+      optionalAmount: '',
+    },
+  });
+  const quantity = form.watch('quantity');
+
+  return (
+    <FormProvider {...form}>
+      <div className="w-[400px] space-y-4">
+        <ControlledInput<InputFormData>
+          name="quantity"
+          type="number"
+          label="Quantity"
+          rules={{ valueAsNumber: true }}
+        />
+        <pre className="rounded bg-gray-100 p-2 text-xs">
+          {JSON.stringify({ value: quantity, type: typeof quantity }, null, 2)}
+        </pre>
+      </div>
+    </FormProvider>
+  );
+};
+
+const NullableNumberInputWithHookForm = () => {
+  const form = useForm<InputFormData>({
+    defaultValues: {
+      username: '',
+      quantity: '',
+      optionalAmount: '',
+    },
+  });
+  const optionalAmount = form.watch('optionalAmount');
+
+  return (
+    <FormProvider {...form}>
+      <div className="w-[400px] space-y-4">
+        <ControlledInput<InputFormData>
+          name="optionalAmount"
+          type="number"
+          label="Optional amount"
+          rules={{
+            setValueAs: (value) => (value === '' ? null : Number(value)),
+          }}
+        />
+        <pre className="rounded bg-gray-100 p-2 text-xs">
+          {JSON.stringify({ value: optionalAmount, type: typeof optionalAmount }, null, 2)}
+        </pre>
+      </div>
+    </FormProvider>
+  );
+};
+
 export const WithReactHookForm: Story = {
   args: {
     name: 'username',
@@ -38,3 +102,11 @@ export const WithReactHookForm: Story = {
   },
   render: () => <ControlledInputWithHookForm />,
 };
+
+export const ValueAsNumber: Story = {
+  render: () => <NumberInputWithHookForm />,
+};
+
+export const SetValueAs: Story = {
+  render: () => <NullableNumberInputWithHookForm />,
+};
diff --git a/packages/medusa-forms/src/controlled/ControlledCurrencyInput.tsx b/packages/medusa-forms/src/controlled/ControlledCurrencyInput.tsx
@@ -1,38 +1,45 @@
 import type * as React from 'react';
-import {
-  Controller,
-  type ControllerProps,
-  type FieldValues,
-  type Path,
-  type RegisterOptions,
-  useFormContext,
-} from 'react-hook-form';
+import { Controller, type ControllerProps, type FieldValues, type Path, useFormContext } from 'react-hook-form';
 import { CurrencyInput, type CurrencyInputProps } from '../ui/CurrencyInput';
+import { type ControlledRules, serializeDisplayValue, splitTransformRules, transformValue } from './valueTransforms';
 
 export type ControlledCurrencyInputProps<T extends FieldValues> = CurrencyInputProps &
-  Omit<ControllerProps, 'render' | 'control'> & {
+  Omit<ControllerProps<T>, 'render' | 'control' | 'rules'> & {
     name: Path<T>;
+    rules?: ControlledRules<T>;
   };
 
 export const ControlledCurrencyInput = <T extends FieldValues>({
   name,
   rules,
+  onChange,
   ...props
 }: ControlledCurrencyInputProps<T>) => {
-  const { control } = useFormContext<T>();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<T>();
+  const { controllerRules, hasTransform } = splitTransformRules(rules);
 
   return (
     <Controller<T>
       control={control}
       name={name}
-      rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}
+      rules={controllerRules}
       render={({ field }) => {
         return (
           <CurrencyInput
             {...field}
             {...props}
+            formErrors={errors}
+            {...(hasTransform ? { value: serializeDisplayValue(field.value, rules) } : {})}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              field.onChange(e.target.value.replace(/[^0-9.-]+/g, ''));
+              if (onChange) {
+                onChange(e);
+              }
+
+              const value = e.target.value.replace(/[^0-9.-]+/g, '');
+              field.onChange(hasTransform ? transformValue(value, rules) : value);
             }}
           />
         );
diff --git a/packages/medusa-forms/src/controlled/ControlledInput.tsx b/packages/medusa-forms/src/controlled/ControlledInput.tsx
@@ -1,20 +1,16 @@
-import type { ComponentProps } from 'react';
-import {
-  Controller,
-  type ControllerProps,
-  type FieldValues,
-  type Path,
-  type RegisterOptions,
-  useFormContext,
-} from 'react-hook-form';
+import type { ChangeEvent, ComponentProps } from 'react';
+import { Controller, type ControllerProps, type FieldValues, type Path, useFormContext } from 'react-hook-form';
 import { Input, type InputProps } from '../ui/Input';
+import { type ControlledRules, serializeDisplayValue, splitTransformRules, transformValue } from './valueTransforms';
 
 export type ControlledInputProps<T extends FieldValues> = InputProps &
-  Omit<ControllerProps, 'render'> & {
+  Omit<ControllerProps<T>, 'render' | 'rules'> & {
     name: Path<T>;
-    rules?: Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
+    rules?: ControlledRules<T>;
   } & ComponentProps<typeof Input> &
-  Omit<ControllerProps<T>, 'render'>;
+  Omit<ControllerProps<T>, 'render' | 'rules'>;
+
+const getEventValue = (evt: ChangeEvent<HTMLInputElement>) => evt.target.value;
 
 export const ControlledInput = <T extends FieldValues>({
   name,
@@ -26,23 +22,25 @@ export const ControlledInput = <T extends FieldValues>({
     control,
     formState: { errors },
   } = useFormContext<T>();
+  const { controllerRules, hasTransform } = splitTransformRules(rules);
 
   return (
     <Controller
       control={control}
       name={name}
-      rules={rules as Omit<RegisterOptions<T, Path<T>>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>}
+      rules={controllerRules}
       render={({ field }) => (
         <Input
           {...field}
           {...props}
           labelClassName={props.labelClassName}
           formErrors={errors}
+          {...(hasTransform ? { value: serializeDisplayValue(field.value, rules) } : {})}
           onChange={(evt) => {
             if (onChange) {
               onChange(evt);
             }
-            field.onChange(evt);
+            field.onChange(hasTransform ? transformValue(getEventValue(evt), rules) : evt);
           }}
         />
       )}
diff --git a/packages/medusa-forms/src/controlled/valueTransforms.ts b/packages/medusa-forms/src/controlled/valueTransforms.ts
@@ -0,0 +1,57 @@
+import type { FieldValues, Path, RegisterOptions } from 'react-hook-form';
+
+export type ControlledRules<T extends FieldValues> = Omit<RegisterOptions<T, Path<T>>, 'disabled'>;
+type ControllerRules<T extends FieldValues> = Omit<ControlledRules<T>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
+
+export const splitTransformRules = <T extends FieldValues>(
+  rules: ControlledRules<T> | undefined,
+): { controllerRules: ControllerRules<T>; hasTransform: boolean } => {
+  const { valueAsNumber, valueAsDate, setValueAs, ...controllerRules } = rules ?? {};
+
+  return {
+    controllerRules,
+    hasTransform: Boolean(valueAsNumber || valueAsDate || setValueAs),
+  };
+};
+
+export const transformValue = <T extends FieldValues>(value: string, rules: ControlledRules<T> | undefined) => {
+  if (rules?.valueAsNumber) {
+    return value === '' ? Number.NaN : +value;
+  }
+
+  if (rules?.valueAsDate) {
+    return new Date(value);
+  }
+
+  if (typeof rules?.setValueAs === 'function') {
+    return rules.setValueAs(value);
+  }
+
+  return value;
+};
+
+const isInvalidDate = (value: Date) => Number.isNaN(value.getTime());
+
+export const serializeDisplayValue = <T extends FieldValues>(value: unknown, rules: ControlledRules<T> | undefined) => {
+  if (value == null) {
+    return '';
+  }
+
+  if (rules?.valueAsNumber) {
+    return typeof value === 'number' && Number.isNaN(value) ? '' : String(value);
+  }
+
+  if (rules?.valueAsDate) {
+    if (!(value instanceof Date) || isInvalidDate(value)) {
+      return '';
+    }
+
+    return value.toISOString().slice(0, 10);
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => String(item));
+  }
+
+  return String(value);
+};
