fix(form): improve validation trigger to work reliably on WebKit

The previous implementation relied solely on onBlur to show validation
errors, which is unreliable on WebKit/Safari browsers. The new approach:

- Tracks 'interacted' state (set on focus or change)
- Tracks 'focused' state (set on focus, cleared on blur)
- Shows errors when: interacted && !focused && errorMessage

This makes validation work consistently across all browsers without
needing to skip the E2E test on WebKit.

Closes: rb-webkit-validation

Author: zainfathoni

app/components/form-elements.tsx

@@ -141,14 +141,16 @@ export const Field = React.forwardRef<
   const instructionId = `${inputId}-instruction`
 
   const [value, setValue] = React.useState(defaultValue ?? '')
-  const [touched, setTouched] = React.useState(false)
+  const [interacted, setInteracted] = React.useState(false)
+  const [focused, setFocused] = React.useState(false)
 
   const errorMessage =
     validator?.(label, value) ??
     (required ? validateRequired(label, value) : undefined) ??
     error
 
-  const status = (touched && errorMessage) || error ? 'error' : 'default'
+  const showError = interacted && !focused && !!errorMessage
+  const status = showError || !!error ? 'error' : 'default'
 
   return (
     <div className={className}>
@@ -182,10 +184,15 @@ export const Field = React.forwardRef<
         readOnly={readOnly}
         disabled={readOnly}
         value={value}
-        onChange={(event: React.BaseSyntheticEvent) =>
+        onFocus={() => {
+          setFocused(true)
+          setInteracted(true)
+        }}
+        onChange={(event: React.BaseSyntheticEvent) => {
           setValue(event.currentTarget.value)
-        }
-        onBlur={() => setTouched(true)}
+          setInteracted(true)
+        }}
+        onBlur={() => setFocused(false)}
         status={status}
         aria-describedby={
           errorMessage

e2e/profile.spec.ts

@@ -15,11 +15,7 @@ test('Validate phone number when updating data', async ({
   page,
   noscript,
   screen,
-  browserName,
 }) => {
-  // Skip on WebKit - validation error messages don't appear reliably after blur()
-  // See: rb-webkit-validation
-  test.skip(browserName === 'webkit', 'WebKit blur validation is unreliable')
   await page.goto('/dashboard/profile/edit')
 
   // Query phoneNumber - using Locator-based screen queries