Fix dynamic select storybook test failure

- Refactored `AutoCalculationExample` story to separate form definition and consumption to stabilize `onChange` and avoid re-subscription loops.
- Modified `useOnFormValueChange` hook to correctly track `prevValue` using `useRef` and optimize dependencies.
- Updated `AutoCalculation` story to use `waitFor` instead of `setTimeout` to prevent CI race conditions.
- Updated `selectRadixOption` test helper to blur the trigger after selection (click on body) to simulate "clicking off" and ensure onBlur events fire.

Author: google-labs-jules[bot]

apps/docs/src/remix-hook-form/use-on-form-value-change.stories.tsx

@@ -8,6 +8,7 @@ import { expect, userEvent, within, waitFor } from '@storybook/test';
 import { useState, useMemo, useCallback } from 'react';
 import { useFetcher } from 'react-router';
 import { useRemixForm, RemixFormProvider, getValidatedFormData } from 'remix-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 import type { ActionFunctionArgs } from 'react-router';
 import { selectRadixOption } from '../lib/storybook/test-utils';
@@ -219,105 +220,107 @@ const orderSchema = z.object({
 
 type OrderFormData = z.infer<typeof orderSchema>;
 
-const AutoCalculationExample = () => {
-  const fetcher = useFetcher<{ message: string }>();
-
-  const rawMethods = useRemixForm<OrderFormData>({
-    resolver: zodResolver(orderSchema),
-    defaultValues: {
-      quantity: '1',
-      pricePerUnit: '100',
-      discount: '0',
-      total: '100.00',
-    },
-    fetcher,
-    submitConfig: {
-      action: '/',
-      method: 'post',
-    },
-  });
-
-  // Memoize methods to prevent unnecessary re-renders of the story tree
-  // which can disrupt interaction tests using Portals
-  const methods = useMemo(() => rawMethods, [rawMethods]);
+// biome-ignore lint/suspicious/noExplicitAny: simple story example
+const AutoCalculationForm = ({ fetcher }: { fetcher: any }) => {
+  const { setValue, getValues, handleSubmit } = useFormContext<OrderFormData>();
 
   const calculateTotal = useCallback(() => {
-    const quantity = Number.parseFloat(methods.getValues('quantity') || '0');
-    const pricePerUnit = Number.parseFloat(methods.getValues('pricePerUnit') || '0');
-    const discount = Number.parseFloat(methods.getValues('discount') || '0');
+    const quantity = Number.parseFloat(getValues('quantity') || '0');
+    const pricePerUnit = Number.parseFloat(getValues('pricePerUnit') || '0');
+    const discount = Number.parseFloat(getValues('discount') || '0');
 
     const subtotal = quantity * pricePerUnit;
     const total = subtotal - subtotal * (discount / 100);
-    methods.setValue('total', total.toFixed(2));
-  }, [methods]);
+    setValue('total', total.toFixed(2));
+  }, [setValue, getValues]);
 
   // Recalculate when quantity changes
   useOnFormValueChange({
     name: 'quantity',
-    methods,
     onChange: calculateTotal,
   });
 
   // Recalculate when price changes
   useOnFormValueChange({
     name: 'pricePerUnit',
-    methods,
     onChange: calculateTotal,
   });
 
   // Recalculate when discount changes
   useOnFormValueChange({
     name: 'discount',
-    methods,
     onChange: calculateTotal,
   });
 
+  return (
+    <form onSubmit={handleSubmit} className="w-96">
+      <div className="space-y-6">
+        <TextField type="number" name="quantity" label="Quantity" description="Number of items" min={1} />
+
+        <TextField
+          type="number"
+          name="pricePerUnit"
+          label="Price per Unit"
+          description="Price for each item"
+          prefix="$"
+          min={0}
+          step="0.01"
+        />
+
+        <TextField
+          type="number"
+          name="discount"
+          label="Discount"
+          description="Discount percentage (0-100)"
+          suffix="%"
+          min={0}
+          max={100}
+        />
+
+        <TextField
+          name="total"
+          label="Total"
+          description="Automatically calculated total"
+          prefix="$"
+          disabled
+          className="font-semibold"
+        />
+
+        <Button type="submit" className="w-full">
+          Submit Order
+        </Button>
+        {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
+      </div>
+    </form>
+  );
+};
+
+const AutoCalculationExample = () => {
+  const fetcher = useFetcher<{ message: string }>();
+
+  const methods = useRemixForm<OrderFormData>({
+    resolver: zodResolver(orderSchema),
+    defaultValues: {
+      quantity: '1',
+      pricePerUnit: '100',
+      discount: '0',
+      total: '100.00',
+    },
+    fetcher,
+    submitConfig: {
+      action: '/',
+      method: 'post',
+    },
+  });
+
   // Don't render if methods is not ready
   if (!methods || !methods.handleSubmit) {
     return <div>Loading...</div>;
   }
 
   return (
     <RemixFormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit} className="w-96">
-        <div className="space-y-6">
-          <TextField type="number" name="quantity" label="Quantity" description="Number of items" min={1} />
-
-          <TextField
-            type="number"
-            name="pricePerUnit"
-            label="Price per Unit"
-            description="Price for each item"
-            prefix="$"
-            min={0}
-            step="0.01"
-          />
-
-          <TextField
-            type="number"
-            name="discount"
-            label="Discount"
-            description="Discount percentage (0-100)"
-            suffix="%"
-            min={0}
-            max={100}
-          />
-
-          <TextField
-            name="total"
-            label="Total"
-            description="Automatically calculated total"
-            prefix="$"
-            disabled
-            className="font-semibold"
-          />
-
-          <Button type="submit" className="w-full">
-            Submit Order
-          </Button>
-          {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
-        </div>
-      </form>
+      <AutoCalculationForm fetcher={fetcher} />
     </RemixFormProvider>
   );
 };

packages/components/src/remix-hook-form/hooks/use-on-form-value-change.ts

@@ -89,11 +89,12 @@ export const useOnFormValueChange = <
     formMethods?.getValues ? formMethods.getValues(name) : undefined,
   );
 
+  const watch = formMethods?.watch;
+  const getValues = formMethods?.getValues;
+
   useEffect(() => {
     // Early return if no form methods are available or hook is disabled
-    if (!enabled || !formMethods || !formMethods.watch || !formMethods.getValues) return;
-
-    const { watch } = formMethods;
+    if (!enabled || !watch || !getValues) return;
 
     // Subscribe to the field value changes
     const subscription = watch(((value, { name: changedFieldName }) => {
@@ -113,5 +114,5 @@ export const useOnFormValueChange = <
     // Cleanup subscription on unmount
 
     return () => subscription.unsubscribe();
-  }, [name, onChange, enabled, formMethods]);
+  }, [name, onChange, enabled, watch, getValues]);
 };