From b93f778b2f7503ac23210566ebc5d10486671410 Mon Sep 17 00:00:00 2001
From: Jude Danbo <judedanbo@gmail.com>
Date: Sun, 21 Jun 2026 11:51:31 +0000
Subject: [PATCH 1/2] fix(ui): make plain inputs focusable on click in scroll
 dialogs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DialogScrollContent nests the content inside DialogOverlay (so the
backdrop can scroll), unlike the standard DialogContent where the two
are siblings. reka's DialogOverlay registers `@pointerdown.left.prevent`,
so a pointerdown on a plain <input> bubbles to the overlay and gets its
default prevented. That suppresses the compatibility mousedown event,
which is what natively focuses an input — so clicking the field did
nothing while clicking the label (native `for=`) still worked.

Stop pointerdown propagation at the content so it never reaches the
overlay handler. Outside-click dismissal is unaffected: it keys off the
pointerdown target being outside the content, not on bubbling through it.

Affected the Designation field in the applicant OfficeFormDialog (the
only plain text input there); the fix lives in the shared primitive so
it repairs every scroll dialog containing a plain input.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/ui/dialog/DialogScrollContent.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/components/ui/dialog/DialogScrollContent.vue b/app/components/ui/dialog/DialogScrollContent.vue
index f6b6dab..4c0e0ee 100644
--- a/app/components/ui/dialog/DialogScrollContent.vue
+++ b/app/components/ui/dialog/DialogScrollContent.vue
@@ -30,6 +30,17 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DialogOverlay
       class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
+      <!--
+        Unlike the standard DialogContent (overlay + content are siblings), the
+        scroll variant nests the content INSIDE the overlay so the backdrop can
+        scroll. reka's DialogOverlay registers `@pointerdown.left.prevent`, so a
+        pointerdown on a plain <input> here bubbles to the overlay and gets its
+        default prevented — which suppresses the compatibility mousedown and
+        stops the input from focusing on click (labels still work via `for=`).
+        Stop pointerdown at the content so it never reaches the overlay handler;
+        outside-click dismissal is unaffected (it keys off the pointerdown
+        target being outside the content, not on bubbling through it).
+      -->
       <DialogContent
         :class="
           cn(
@@ -38,6 +49,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           )
         "
         v-bind="{ ...$attrs, ...forwarded }"
+        @pointerdown.stop
         @pointer-down-outside="(event) => {
           const originalEvent = event.detail.originalEvent;
           const target = originalEvent.target as HTMLElement;

From 65afc577c1b5f8fee8f5aa94cf14dab842a349c9 Mon Sep 17 00:00:00 2001
From: Jude Danbo <judedanbo@gmail.com>
Date: Sun, 21 Jun 2026 12:18:03 +0000
Subject: [PATCH 2/2] test(e2e): guard click-to-focus in the Office scroll
 dialog

Adds a Playwright regression test that opens the applicant Office dialog
and asserts a real click on the plain Designation <input> focuses it,
that typing flows through, and that backdrop-click dismissal still works.

Verified as a genuine guard: removing the @pointerdown.stop fix makes the
toBeFocused assertion fail. The dismissal check runs on a freshly-opened
dialog because reka absorbs the first outside pointerdown once focus has
entered a text input (pre-existing modal behaviour, unrelated to the fix).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/tests/e2e/office-dialog-focus.spec.ts | 78 +++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 app/tests/e2e/office-dialog-focus.spec.ts

diff --git a/app/tests/e2e/office-dialog-focus.spec.ts b/app/tests/e2e/office-dialog-focus.spec.ts
new file mode 100644
index 0000000..e7412c1
--- /dev/null
+++ b/app/tests/e2e/office-dialog-focus.spec.ts
@@ -0,0 +1,78 @@
+import { test, expect, type Page } from "@playwright/test";
+
+// Regression guard for the click-to-focus bug in DialogScrollContent.
+//
+// reka's DialogOverlay registers `@pointerdown.left.prevent`. The scroll variant
+// nests the dialog content INSIDE that overlay, so a pointerdown on a plain
+// <input> used to bubble up to the overlay and get its default prevented — which
+// suppresses the compatibility mousedown and stops the input from focusing on
+// click (only the <label for=...> worked). Fixed by `@pointerdown.stop` on the
+// content. This test opens the applicant Office dialog (which contains the only
+// such plain input, "Designation") and asserts a real click focuses it.
+//
+// No DB writes: we open the dialog and click, but never submit — so no Prisma
+// cleanup is needed. Requires the seeded applicant (`npm run db:seed`).
+
+const APPLICANT_EMAIL = "applicant@adla.gov.gh";
+const APPLICANT_PASSWORD = "password123";
+
+/**
+ * Wait for the Nuxt client to hydrate. Interacting before hydration leaves
+ * v-model state un-reactive. We avoid `networkidle` — the dev server keeps
+ * long-lived HMR connections, so that state never settles on app pages.
+ */
+async function waitForHydration(page: Page) {
+  await page.waitForLoadState("domcontentloaded");
+  await page.waitForTimeout(2000);
+}
+
+/** Log in through the UI as the seeded applicant and land on their dashboard. */
+async function loginAsApplicant(page: Page) {
+  await page.goto("/auth/login");
+  await waitForHydration(page);
+  await page.getByLabel("Email address").fill(APPLICANT_EMAIL);
+  await page.getByLabel("Password").first().fill(APPLICANT_PASSWORD);
+  await page.getByRole("button", { name: /sign in/i }).click();
+  await page.waitForURL(/\/applicant\/dashboard/, { timeout: 30_000 });
+}
+
+test("Office dialog: clicking the Designation input focuses it", async ({ page }) => {
+  await loginAsApplicant(page);
+
+  // An applicant on an applicant route is not bounced by the client middleware
+  // (unlike the admin case), so a direct goto is safe here.
+  await page.goto("/applicant/profile/edit");
+  await waitForHydration(page);
+
+  const openButton = page.getByRole("button", { name: /add (another|your first) office/i });
+  const dialog = page.getByRole("dialog");
+
+  // --- No-regression check: outside-click dismissal still works ---
+  // Done on a freshly-opened dialog. Note: once focus has entered a text input,
+  // reka absorbs the first outside pointerdown (pre-existing modal behaviour,
+  // unrelated to this fix), so we assert dismissal BEFORE touching any input.
+  // Target the overlay's left gutter (left of the centered, max-w-lg content)
+  // at the vertical middle of the viewport — reliably backdrop.
+  await openButton.click();
+  await expect(dialog.getByRole("heading", { name: /add office/i })).toBeVisible();
+  const point = await page.evaluate(() => {
+    const content = document.querySelector('[role="dialog"]')!.getBoundingClientRect();
+    return { x: Math.max(5, Math.round(content.left / 2)), y: Math.round(window.innerHeight / 2) };
+  });
+  await page.mouse.click(point.x, point.y);
+  await expect(dialog).toBeHidden();
+
+  // --- Core regression assertion ---
+  // Re-open, then a real click on the plain Designation input must focus it.
+  // Before the fix this failed — the overlay's pointerdown.prevent swallowed the
+  // native focus and focus stayed elsewhere.
+  await openButton.click();
+  await expect(dialog.getByRole("heading", { name: /add office/i })).toBeVisible();
+  const designation = dialog.getByPlaceholder(/Deputy Minister/i);
+  await designation.click();
+  await expect(designation).toBeFocused();
+
+  // Functional guard: focus + typing actually works through the field.
+  await designation.fill("Director General");
+  await expect(designation).toHaveValue("Director General");
+});