Fix: incorporate community feedback for test stability and resolve lint

- Add explicit existence checks in selectRadixOption and stories\n- Memoize onChange handlers with useCallback\n- Use findByLabelText for initial canvas anchoring\n- All lint warnings resolved

Author: jaruesink

apps/docs/src/lib/storybook/test-utils.ts

@@ -18,21 +18,25 @@ export async function selectRadixOption(
 
   // 1. Find and click the trigger within the component canvas
   const trigger = await canvas.findByRole(triggerRole, { name: triggerName });
+  if (!trigger) throw new Error(`Trigger with role ${triggerRole} and name ${triggerName} not found`);
+
   await userEvent.click(trigger);
 
   // 2. Wait for the listbox to appear in the document body (Portal)
-  // We use findByRole on screen to wait for the element to mount.
   // We use a slightly longer timeout for CI stability.
   const listbox = await screen.findByRole('listbox', {}, { timeout: 3000 });
+  if (!listbox) throw new Error('Radix listbox (portal) not found after clicking trigger');
 
   // 3. Find the option specifically WITHIN the listbox
-  let option: HTMLElement;
+  let option: HTMLElement | null = null;
   if (optionTestId) {
     option = await within(listbox).findByTestId(optionTestId);
   } else {
     option = await within(listbox).findByRole('option', { name: optionName });
   }
 
+  if (!option) throw new Error(`Option ${optionName || optionTestId} not found in listbox`);
+
   // 4. Click the option
   // pointerEventsCheck: 0 is used to bypass Radix's temporary pointer-event locks during animations
   await userEvent.click(option, { pointerEventsCheck: 0 });

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

@@ -512,10 +512,14 @@ export const ConditionalFields: Story = {
 
     // Shipping address field should appear
     const shippingInput = await canvas.findByLabelText(/shipping address/i);
+    if (!shippingInput) throw new Error('Shipping address input not found');
     expect(shippingInput).toBeInTheDocument();
     await userEvent.type(shippingInput, '123 Main St');
 
     // Switch to pickup
+    // Give the DOM a moment to settle after the previous interaction
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
     await selectRadixOption(canvasElement, {
       triggerName: /delivery type/i,
       optionName: /store pickup/i,
@@ -524,6 +528,7 @@ export const ConditionalFields: Story = {
 
     // Store location should appear, shipping address should be gone
     const storeSelect = await canvas.findByRole('combobox', { name: /store location/i });
+    if (!storeSelect) throw new Error('Store location select not found');
     expect(storeSelect).toBeInTheDocument();
 
     // Select a store
@@ -535,6 +540,7 @@ export const ConditionalFields: Story = {
 
     // Submit form
     const submitButton = canvas.getByRole('button', { name: /complete order/i });
+    if (!submitButton) throw new Error('Submit button not found');
     await userEvent.click(submitButton);
 
     // Verify success message