fix(e2e): click before fill to ensure onFocus fires on WebKit (iPhone 11)

Playwright's fill() is supposed to focus the element before typing, but on
WebKit/Safari (used for the iPhone 11 test project), the synthetic onFocus
event is not always reliably dispatched in CI's headless environment.

The Field component tracks 'interacted' state (set on onFocus or onChange)
to decide whether to show validation errors after blur. If onFocus doesn't
fire, 'interacted' stays false and the error message never renders, causing
the E2E assertion to fail with 'element(s) not found'.

Fix: add an explicit .click() before .fill() in both validation tests. A
click is guaranteed to trigger focus events in all browsers, ensuring
'interacted' is set to true before we blur and check for the error.

Applied to both phone-number and name validation tests for consistency.

Author: wheeljackz

e2e/profile.spec.ts

@@ -30,7 +30,9 @@ test('Validate phone number when updating data', async ({
     name: /nomor whatsapp/i,
   })
 
-  // Fill phoneNumber with invalid value
+  // Click first to ensure onFocus fires reliably on WebKit (iPhone 11),
+  // then fill with invalid value and blur to trigger client-side validation.
+  await phoneNumber.click()
   await phoneNumber.fill('6512345678')
   await phoneNumber.blur()
 
@@ -64,7 +66,9 @@ test('Validate name when updating data', async ({ page, noscript, screen }) => {
     name: /nama lengkap/i,
   })
 
-  // Clear name and trigger validation
+  // Click first to ensure onFocus fires reliably on WebKit (iPhone 11),
+  // then clear and blur to trigger client-side validation.
+  await name.click()
   await name.fill('')
   await name.blur()