@jmruthers/pace-core 0.6.4 → 0.6.6

package/src/components/Dialog/index.ts

@@ -3,10 +3,10 @@ export type {
   DialogProps,
   DialogTriggerProps,
   DialogContentProps,
-  DialogOverlayProps,
+  DialogPortalProps,
+  DialogCloseProps,
   DialogHeaderProps,
   DialogFooterProps,
   DialogBodyProps,
-  DialogTitleProps,
-  DialogDescriptionProps
+  DialogSize
 } from './Dialog';

package/src/components/FileDisplay/FileDisplay.test.tsx

@@ -84,6 +84,17 @@ const baseProps = {
 describe('[component] FileDisplay', () => {
   beforeEach(async () => {
     vi.clearAllMocks();
+    
+    // Mock showModal for dialog elements (needed for test environments)
+    HTMLDialogElement.prototype.showModal = vi.fn(function(this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+      this.dispatchEvent(new Event('show', { bubbles: true }));
+    });
+    HTMLDialogElement.prototype.close = vi.fn(function(this: HTMLDialogElement) {
+      this.removeAttribute('open');
+      this.dispatchEvent(new Event('close', { bubbles: true }));
+    });
+    
     // Set up default mock for useFileDisplay
     const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
@@ -195,9 +206,25 @@ describe('[component] FileDisplay', () => {
     const deleteBtn = screen.getByRole('button', { name: /Delete file/i });
     await userEvent.click(deleteBtn);
     
+    // Wait for dialog to open and be accessible
+    // In test environments (jsdom), dialog.open may not be set even when dialog is rendered
+    await waitFor(async () => {
+      try {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toBeInTheDocument();
+      } catch (e) {
+        // Fallback for test environments - just check that dialog exists in DOM
+        const dialog = document.querySelector('dialog[role="dialog"]');
+        if (!dialog) {
+          throw new Error('Dialog not found in DOM');
+        }
+      }
+    }, { timeout: 3000 });
+    
     // Dialog should open
     expect(await screen.findByText('Confirm Delete')).toBeInTheDocument();
-    const confirmDeleteBtn = screen.getByRole('button', { name: /^Delete$/i });
+    // Button has aria-label="Delete file", so accessible name is "Delete file"
+    const confirmDeleteBtn = await screen.findByRole('button', { name: 'Delete file' }, { timeout: 2000 });
     await userEvent.click(confirmDeleteBtn);
 
     confirmSpy.mockRestore();
@@ -376,9 +403,25 @@ describe('[component] FileDisplay', () => {
     const deleteBtn = screen.getByRole('button', { name: /Delete file/i });
     await userEvent.click(deleteBtn);
     
+    // Wait for dialog to open and be accessible
+    // In test environments (jsdom), dialog.open may not be set even when dialog is rendered
+    await waitFor(async () => {
+      try {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toBeInTheDocument();
+      } catch (e) {
+        // Fallback for test environments - just check that dialog exists in DOM
+        const dialog = document.querySelector('dialog[role="dialog"]');
+        if (!dialog) {
+          throw new Error('Dialog not found in DOM');
+        }
+      }
+    }, { timeout: 3000 });
+    
     // Dialog should open
     expect(await screen.findByText('Confirm Delete')).toBeInTheDocument();
-    const confirmDeleteBtn = screen.getByRole('button', { name: /^Delete$/i });
+    // Button has aria-label="Delete file", so accessible name is "Delete file"
+    const confirmDeleteBtn = await screen.findByRole('button', { name: 'Delete file' }, { timeout: 2000 });
     await userEvent.click(confirmDeleteBtn);
   });
 

package/src/components/FileDisplay/FileDisplay.tsx

@@ -6,7 +6,7 @@ import { useFileDisplay } from '../../hooks/useFileDisplay';
 import { useFileUrl } from '../../hooks/useFileUrl';
 import { PublicPageContext, useIsPublicPage } from '../PublicLayout/PublicPageProvider';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from '../Dialog/Dialog';
+import { Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter } from '../Dialog/Dialog';
 import { Button } from '../Button/Button';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { logger } from '../../utils/core/logger';
@@ -448,9 +448,9 @@ const FileDisplayContent = React.memo(function FileDisplayContent({
                   ×
                 </Button>
                 <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                  <DialogContent size="sm">
+                  <DialogContent size="sm" title="Confirm Delete">
                     <DialogHeader>
-                      <DialogTitle>Confirm Delete</DialogTitle>
+                      <h2>Confirm Delete</h2>
                     </DialogHeader>
                     <DialogBody>
                       <p>Are you sure you want to delete this file? This action cannot be undone.</p>
@@ -520,9 +520,9 @@ const FileDisplayContent = React.memo(function FileDisplayContent({
                     ×
                   </Button>
                   <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                    <DialogContent size="sm">
+                    <DialogContent size="sm" title="Confirm Delete">
                       <DialogHeader>
-                        <DialogTitle>Confirm Delete</DialogTitle>
+                        <h2>Confirm Delete</h2>
                       </DialogHeader>
                       <DialogBody>
                         <p>Are you sure you want to delete this file? This action cannot be undone.</p>
@@ -654,9 +654,32 @@ function FileDisplayPublic({
   enableChildren,
   showMetadata
 }: FileDisplayProps) {
+  // Call all hooks unconditionally at the top level
+  // Hooks must be called in the same order on every render
   const publicPageContext = useContext(PublicPageContext);
   const supabase = publicPageContext?.supabase ?? null;
 
+  // Call hook unconditionally - if supabase is null, the hook will handle it
+  // Use a dummy supabase client if null to satisfy type requirements
+  // The hook should handle null gracefully, but TypeScript requires a valid type
+  const {
+    fileUrl,
+    fileReference,
+    fileReferences,
+    fileUrls,
+    fileCount,
+    isLoading,
+    error,
+    refetch
+  } = usePublicFileDisplay(
+    table_name,
+    record_id,
+    organisation_id,
+    category,
+    { supabase: supabase as any } // Type assertion needed due to type mismatch between contexts
+  );
+
+  // Early return after all hooks have been called
   if (!supabase) {
     // If fallback is enabled, show fallback UI instead of error
     if (showFallback) {
@@ -700,23 +723,6 @@ function FileDisplayPublic({
     );
   }
 
-  const {
-    fileUrl,
-    fileReference,
-    fileReferences,
-    fileUrls,
-    fileCount,
-    isLoading,
-    error,
-    refetch
-  } = usePublicFileDisplay(
-    table_name,
-    record_id,
-    organisation_id,
-    category,
-    { supabase }
-  );
-
   // Log errors for debugging public file display issues
   if (error) {
     logger.error('FileDisplayPublic', 'Error fetching file', {

package/src/components/Form/Form.test.tsx

@@ -170,7 +170,7 @@ describe('Form Component', () => {
       await user.type(screen.getByLabelText('Name'), 'John Doe');
       await user.click(screen.getByRole('button', { name: 'Submit' }));
       
-      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' }, expect.any(Object));
+      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' });
     });
 
     it('calls onError when form has validation errors', async () => {
@@ -194,8 +194,7 @@ describe('Form Component', () => {
           name: expect.objectContaining({
             message: 'Required'
           })
-        }),
-        expect.any(Object)
+        })
       );
       expect(onSubmit).not.toHaveBeenCalled();
     });
@@ -213,7 +212,7 @@ describe('Form Component', () => {
       await user.type(screen.getByLabelText('Name'), 'John Doe');
       await user.click(screen.getByRole('button', { name: 'Submit' }));
       
-      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' }, expect.any(Object));
+      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' });
     });
   });
 
@@ -387,10 +386,9 @@ describe('Form Component', () => {
           email: 'john@example.com'
         },
         preferences: {
-          theme: 'dark',
-          notifications: undefined
+          theme: 'dark'
         }
-      }, expect.any(Object));
+      });
     });
   });
 });
@@ -469,8 +467,9 @@ describe('FormField Component', () => {
         </Form>
       );
       
-      const fieldContainer = screen.getByLabelText('Test Field').closest('div');
-      expect(fieldContainer).toHaveClass('custom-field');
+      // FormField applies className to the label element, not a div container
+      const label = screen.getByLabelText('Test Field').closest('label');
+      expect(label).toHaveClass('custom-field');
     });
 
     it('renders with test ID', () => {
@@ -709,7 +708,7 @@ describe('Integration', () => {
         name: 'John Doe',
         email: 'john@example.com',
         age: 25
-      }, expect.any(Object));
+      });
     });
     expect(onError).not.toHaveBeenCalled();
   });

package/src/components/Form/Form.tsx

@@ -71,12 +71,16 @@
  * - React 19+ - Hooks and context
  */
 
-import React from 'react';
-import { useForm, FormProvider, UseFormReturn, FieldValues, DefaultValues, SubmitHandler, SubmitErrorHandler, useFormContext, Controller, FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useForm, FormProvider, UseFormReturn, FieldValues, DefaultValues, SubmitHandler, SubmitErrorHandler, useFormContext, Controller, FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import { useLocation } from 'react-router-dom';
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { cn } from '../../utils/core/cn';
-import { Label } from '../Label';
+import { useSessionDraft } from '../../hooks/useSessionDraft';
+import { deriveFormKey } from '../../utils/persistence/keyDerivation';
+import { filterSensitiveFields, isSensitiveField } from '../../utils/persistence/sensitiveFieldDetection';
 
 /**
  * Props for the Form component
@@ -149,14 +153,370 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
   children,
   className,
 }: FormProps<TFieldValues>) {
+  // Call all hooks unconditionally at the top level
+  // Hooks must be called in the same order on every render
+  // If providers are missing, these hooks will throw - errors should be handled by error boundaries
+  const location = useLocation();
+  const auth = useUnifiedAuth();
+  const userId = auth.user?.id || null;
+
+  // Extract field names from schema or defaultValues for key derivation and sensitive field filtering
+  const fieldNames = useMemo(() => {
+    if (schema && 'shape' in schema && typeof schema.shape === 'object') {
+      return Object.keys(schema.shape as Record<string, unknown>);
+    }
+    if (defaultValues) {
+      return Object.keys(defaultValues);
+    }
+    return [];
+  }, [schema, defaultValues]);
+
+  // Derive persistence key (scoped by user ID)
+  const persistenceKey = useMemo(() => {
+    return deriveFormKey(
+      {
+        fieldNames,
+      },
+      null, // Parent context (Dialog) - not available yet, can be enhanced later
+      location,
+      userId
+    );
+  }, [fieldNames, location, userId]);
+
+  // Get field types for sensitive field detection
+  // Extract from schema if available, otherwise infer from defaultValues
+  const fieldTypes = useMemo(() => {
+    const types: Record<string, string> = {};
+    
+    // Try to extract types from schema
+    if (schema && 'shape' in schema && typeof schema.shape === 'object') {
+      const shape = schema.shape as Record<string, any>;
+      for (const [key, value] of Object.entries(shape)) {
+        // Zod schema type detection (simplified)
+        if (value && typeof value === 'object' && '_def' in value) {
+          const def = (value as any)._def;
+          if (def.typeName === 'ZodString') {
+            types[key] = 'text';
+          } else if (def.typeName === 'ZodNumber') {
+            types[key] = 'number';
+          } else if (def.typeName === 'ZodBoolean') {
+            types[key] = 'checkbox';
+          }
+        }
+      }
+    }
+    
+    return types;
+  }, [schema]);
+
+  // Use session draft for persistence
+  const { state: persistedValues, setState: setPersistedValues, clearDraft } = useSessionDraft<Partial<TFieldValues>>(
+    persistenceKey || 'form:no-key',
+    {} as Partial<TFieldValues>,
+    {
+      enabled: Boolean(persistenceKey),
+      debounceMs: 300,
+    }
+  );
+
+  // Merge persisted values with defaultValues (persisted takes precedence)
+  const mergedDefaultValues = useMemo(() => {
+    if (!persistenceKey || !persistedValues || Object.keys(persistedValues).length === 0) {
+      return defaultValues;
+    }
+
+    // Filter sensitive fields from persisted values
+    const filteredPersisted = filterSensitiveFields(
+      persistedValues,
+      fieldNames,
+      fieldTypes
+    );
+
+    return {
+      ...defaultValues,
+      ...filteredPersisted,
+    } as DefaultValues<TFieldValues>;
+  }, [defaultValues, persistedValues, persistenceKey, fieldNames, fieldTypes]);
+
   const methods = useForm<TFieldValues>({
     resolver: schema ? zodResolver(schema) : undefined,
-    defaultValues,
+    defaultValues: mergedDefaultValues,
     mode,
     shouldUnregister: false,
   });
 
-  const handleSubmit = methods.handleSubmit(onSubmit, onError);
+  // Track if we've already restored persisted values to prevent infinite loops
+  const hasRestoredRef = useRef(false);
+  const isRestoringRef = useRef(false);
+  const restoreTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastRestoredRef = useRef<string | null>(null);
+
+  // Restore persisted values after form initialization
+  // CRITICAL: Must run when persistedValues changes (e.g., when dialog auto-opens)
+  useEffect(() => {
+    // Clear any pending restore
+    if (restoreTimeoutRef.current) {
+      clearTimeout(restoreTimeoutRef.current);
+    }
+
+    // Skip if already restored or currently restoring
+    if (isRestoringRef.current) {
+      return;
+    }
+
+    if (!persistenceKey || !persistedValues || Object.keys(persistedValues).length === 0) {
+      // Mark as restored even if no persisted values (prevents re-running)
+      if (!hasRestoredRef.current) {
+        hasRestoredRef.current = true;
+      }
+      return;
+    }
+
+    // Skip if we've already restored these exact values
+    const persistedValuesStr = JSON.stringify(persistedValues);
+    if (lastRestoredRef.current === persistedValuesStr && hasRestoredRef.current) {
+      return;
+    }
+
+    isRestoringRef.current = true;
+
+    // Defer restoration to prevent blocking and allow form to initialize
+    restoreTimeoutRef.current = setTimeout(() => {
+      // CRITICAL: Handle both numeric keys (from old array-based persistence) and field names
+      // If persistedValues has numeric keys, map them to fieldNames
+      const persistedKeys = Object.keys(persistedValues as Record<string, any>);
+      const hasNumericKeys = persistedKeys.length > 0 && persistedKeys.every(key => /^\d+$/.test(key));
+      
+      let valuesToRestore: Record<string, any>;
+      if (hasNumericKeys && fieldNames.length === persistedKeys.length) {
+        // Map numeric keys to field names
+        valuesToRestore = {};
+        for (let i = 0; i < fieldNames.length; i++) {
+          const fieldName = fieldNames[i];
+          const numericKey = String(i);
+          if (numericKey in persistedValues) {
+            valuesToRestore[fieldName] = (persistedValues as Record<string, any>)[numericKey];
+          }
+        }
+        console.log('[Form Persistence] Mapped numeric keys to field names:', {
+          numericKeys: persistedKeys,
+          fieldNames,
+          mappedValues: valuesToRestore,
+        });
+      } else {
+        // Use persistedValues as-is (should have field names as keys)
+        valuesToRestore = persistedValues as Record<string, any>;
+      }
+
+      // Filter sensitive fields
+      const restoreKeys = Object.keys(valuesToRestore);
+      const filteredPersisted = filterSensitiveFields(
+        valuesToRestore,
+        restoreKeys.length > 0 ? restoreKeys : fieldNames,
+        fieldTypes
+      );
+
+      // Debug: Check which fields are being filtered
+      const sensitiveFields = restoreKeys.filter(name => {
+        const type = fieldTypes?.[name];
+        return isSensitiveField(name, type);
+      });
+
+      console.log('[Form Persistence] ✅ Restoring persisted values:', {
+        persistenceKey,
+        persistedValuesKeys: persistedKeys,
+        persistedValuesString: JSON.stringify(persistedValues),
+        hasNumericKeys,
+        valuesToRestoreKeys: Object.keys(valuesToRestore),
+        filteredPersistedKeys: Object.keys(filteredPersisted),
+        fieldNames,
+        sensitiveFields,
+        filteredCount: Object.keys(filteredPersisted).length,
+        persistedCount: persistedKeys.length,
+        timestamp: new Date().toISOString(),
+      });
+
+      // Set values that might not have been in defaultValues
+      const valuesToSet: Partial<TFieldValues> = {};
+      let hasValuesToSet = false;
+
+      for (const [key, value] of Object.entries(filteredPersisted)) {
+        const currentValue = methods.getValues(key as any);
+        // Only set if different from current value (to avoid unnecessary updates)
+        if (currentValue !== value) {
+          valuesToSet[key as keyof TFieldValues] = value as any;
+          hasValuesToSet = true;
+        }
+      }
+
+      if (hasValuesToSet) {
+        console.log('[Form Persistence] 🔄 Setting form values via reset():', {
+          persistenceKey,
+          valuesToSetKeys: Object.keys(valuesToSet),
+          valuesToSet,
+          timestamp: new Date().toISOString(),
+        });
+        // Use reset to update all values at once
+        methods.reset({
+          ...methods.getValues(),
+          ...valuesToSet,
+        } as TFieldValues);
+        console.log('[Form Persistence] ✅ Form values set successfully', {
+          persistenceKey,
+          currentValues: methods.getValues(),
+        });
+      } else {
+        console.log('[Form Persistence] ⏭️ No values to set (all values already match)', {
+          persistenceKey,
+        });
+      }
+
+      lastRestoredRef.current = persistedValuesStr;
+      hasRestoredRef.current = true;
+      isRestoringRef.current = false;
+      restoreTimeoutRef.current = null;
+    }, 100); // Small delay to ensure form is ready
+
+    return () => {
+      if (restoreTimeoutRef.current) {
+        clearTimeout(restoreTimeoutRef.current);
+        restoreTimeoutRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [persistedValues, persistenceKey]); // Run when persistedValues changes (e.g., dialog auto-opens)
+
+  // Log component mount
+
+  // Watch form values for persistence
+  // CRITICAL: Don't pass name parameter - useWatch without name returns all values as an object
+  // If we pass fieldNames array, it returns an array with numeric indices, not an object with field names
+  const watchedValues = useWatch({
+    control: methods.control,
+    // Don't pass name - we want all values as an object, not an array
+  }) as Partial<TFieldValues>;
+
+  // Track previous values to prevent unnecessary persistence updates
+  const previousValuesRef = useRef<string | null>(null);
+  const persistTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Persist form values (filtered for sensitive fields)
+  useEffect(() => {
+    if (!persistenceKey || !watchedValues || isRestoringRef.current) {
+      return;
+    }
+
+    // Skip if values haven't actually changed
+    const currentValuesStr = JSON.stringify(watchedValues);
+    if (currentValuesStr === previousValuesRef.current) {
+      return;
+    }
+
+    previousValuesRef.current = currentValuesStr;
+
+    // Clear any pending persistence
+    if (persistTimeoutRef.current) {
+      clearTimeout(persistTimeoutRef.current);
+    }
+
+    // Debounce persistence to prevent excessive updates while user is typing
+    persistTimeoutRef.current = setTimeout(() => {
+      // Filter sensitive fields before persisting
+      // CRITICAL: Use all keys from watchedValues to ensure we capture all values
+      const allFieldNames = Object.keys(watchedValues as Record<string, any>);
+      const filteredValues = filterSensitiveFields(
+        watchedValues as Record<string, any>,
+        allFieldNames.length > 0 ? allFieldNames : fieldNames,
+        fieldTypes
+      );
+
+      // Debug: Check which fields are being filtered
+      const sensitiveFields = allFieldNames.filter(name => {
+        const type = fieldTypes?.[name];
+        return isSensitiveField(name, type);
+      });
+
+      console.log('[Form Persistence] 💾 Persisting form values:', {
+        persistenceKey,
+        filteredValuesKeys: Object.keys(filteredValues),
+        originalValuesKeys: Object.keys(watchedValues as Record<string, any>),
+        allFieldNames,
+        sensitiveFields,
+        filteredCount: Object.keys(filteredValues).length,
+        originalCount: allFieldNames.length,
+        timestamp: new Date().toISOString(),
+      });
+
+      setPersistedValues(filteredValues as Partial<TFieldValues>);
+      
+      // Log sessionStorage after setting (with delay to allow write)
+      if (persistenceKey) {
+        setTimeout(() => {
+          const storageKey = `pace-core:draft:${persistenceKey}`;
+          const stored = sessionStorage.getItem(storageKey);
+          console.log('[Form Persistence] 📦 SessionStorage AFTER setPersistedValues:', {
+            persistenceKey,
+            storageKey,
+            stored: stored ? JSON.parse(stored) : null,
+          });
+        }, 100);
+      }
+      persistTimeoutRef.current = null;
+    }, 300); // Debounce for 300ms
+
+    return () => {
+      if (persistTimeoutRef.current) {
+        clearTimeout(persistTimeoutRef.current);
+        persistTimeoutRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchedValues, persistenceKey]); // CRITICAL: Only depend on watchedValues and persistenceKey to prevent infinite loops
+
+  // Enhanced submit handler that clears draft on success
+  const handleSubmit = methods.handleSubmit(
+    async (data) => {
+      console.log('[Form Lifecycle] 📤 Form submit started', {
+        persistenceKey,
+        dataKeys: Object.keys(data),
+        timestamp: new Date().toISOString(),
+      });
+      
+      await onSubmit(data);
+      
+      console.log('[Form Lifecycle] ✅ Form submit successful', {
+        persistenceKey,
+        timestamp: new Date().toISOString(),
+      });
+      
+      // Clear draft after successful submit
+      if (persistenceKey && clearDraft) {
+        console.log('[Form Persistence] 🗑️ Clearing draft after successful submit', {
+          persistenceKey,
+        });
+        clearDraft();
+        
+        // Log sessionStorage after clearing
+        setTimeout(() => {
+          const storageKey = `pace-core:draft:${persistenceKey}`;
+          const stored = sessionStorage.getItem(storageKey);
+          console.log('[Form Persistence] 📦 SessionStorage AFTER clearDraft (submit):', {
+            persistenceKey,
+            storageKey,
+            stored: stored ? JSON.parse(stored) : null,
+          });
+        }, 100);
+      }
+    },
+    (errors) => {
+      console.log('[Form Lifecycle] ❌ Form submit failed with errors', {
+        persistenceKey,
+        errors,
+        timestamp: new Date().toISOString(),
+      });
+      onError?.(errors);
+    }
+  );
 
   return (
     <FormProvider {...methods}>
@@ -322,16 +682,16 @@ export function FormField<
   const { control } = useFormContext<TFieldValues>();
 
   return (
-    <div className={cn("space-y-2", className)}>
+    <label className={cn("space-y-2", className)}>
       {label && (
-        <Label htmlFor={name}>
+        <>
           {label}
           {validation?.required && (
             <span className="text-destructive ml-1" aria-label="required">
               *
             </span>
           )}
-        </Label>
+        </>
       )}
       
       <Controller
@@ -375,6 +735,6 @@ export function FormField<
           );
         }}
       />
-    </div>
+    </label>
   );
 }