Add delay after selection to fix dropdown tests

Author: codegen-sh[bot]

apps/docs/src/remix-hook-form/select-custom.stories.tsx

@@ -9,6 +9,9 @@ import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hoo
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
+// Helper function to wait for a short time
+const waitForSelection = async (ms = 50) => new Promise(resolve => setTimeout(resolve, ms));
+
 const formSchema = z.object({
   region: z.string().min(1, 'Please select a region'),
   theme: z.string().min(1, 'Please select a theme'),
@@ -233,6 +236,7 @@ Each custom component should use React.forwardRef to preserve focus, ARIA, and k
       await userEvent.click(themeSelect);
       const purple = await within(document.body).findByRole('option', { name: 'Purple' });
       await userEvent.click(purple);
+      await waitForSelection();
       expect(themeSelect).toHaveTextContent('Purple');
     });
 
@@ -241,6 +245,7 @@ Each custom component should use React.forwardRef to preserve focus, ARIA, and k
       await userEvent.click(fruitSelect);
       const banana = await within(document.body).findByRole('option', { name: '🍌 Banana' });
       await userEvent.click(banana);
+      await waitForSelection();
       expect(fruitSelect).toHaveTextContent('🍌 Banana');
     });
 

apps/docs/src/remix-hook-form/select.test.tsx

@@ -1,6 +1,9 @@
 import { expect, userEvent, within } from '@storybook/test';
 import { StoryContext } from '@storybook/react';
 
+// Helper function to wait for a short time
+const waitForSelection = async (ms = 50) => new Promise(resolve => setTimeout(resolve, ms));
+
 // Test selecting a US state
 export const testUSStateSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
@@ -13,6 +16,9 @@ export const testUSStateSelection = async ({ canvasElement }: StoryContext) => {
   const californiaOption = await within(document.body).findByRole('option', { name: 'California' });
   await userEvent.click(californiaOption);
 
+  // Wait for the selection to be applied
+  await waitForSelection();
+  
   // Verify the selection
   expect(stateDropdown).toHaveTextContent('California');
 };
@@ -29,6 +35,9 @@ export const testCanadaProvinceSelection = async ({ canvasElement }: StoryContex
   const ontarioOption = await within(document.body).findByRole('option', { name: 'Ontario' });
   await userEvent.click(ontarioOption);
 
+  // Wait for the selection to be applied
+  await waitForSelection();
+  
   // Verify the selection
   expect(provinceDropdown).toHaveTextContent('Ontario');
 };
@@ -42,18 +51,21 @@ export const testFormSubmission = async ({ canvasElement }: StoryContext) => {
   await userEvent.click(stateDropdown);
   const californiaOption = await within(document.body).findByRole('option', { name: 'California' });
   await userEvent.click(californiaOption);
+  await waitForSelection();
 
   // Select a province
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
   const ontarioOption = await within(document.body).findByRole('option', { name: 'Ontario' });
   await userEvent.click(ontarioOption);
+  await waitForSelection();
 
   // Select a custom region
   const regionDropdown = canvas.getByLabelText('Custom Region');
   await userEvent.click(regionDropdown);
   const customOption = await within(document.body).findByRole('option', { name: 'New York' });
   await userEvent.click(customOption);
+  await waitForSelection();
 
   // Submit the form
   const submitButton = canvas.getByRole('button', { name: 'Submit' });