diff --git a/apps/web/modules/form-builder/components/Components.tsx b/apps/web/modules/form-builder/components/Components.tsx index c493145f79ac7b..dcc8943113ac68 100644 --- a/apps/web/modules/form-builder/components/Components.tsx +++ b/apps/web/modules/form-builder/components/Components.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, useRef } from "react"; import type { z } from "zod"; import type { @@ -248,6 +248,16 @@ export const Components: Record = { const placeholder = props.placeholder; const { t } = useLocale(); value = value || []; + const emailRefs = useRef>([]); + const autoFocusIndexRef = useRef(null); + + useEffect(() => { + if (autoFocusIndexRef.current !== null) { + emailRefs.current[autoFocusIndexRef.current]?.focus(); + autoFocusIndexRef.current = null; + } + }, [value.length]); + return ( <> {value.length ? ( @@ -260,6 +270,9 @@ export const Components: Record = {
  • { + emailRefs.current[index] = node; + }} disabled={readOnly} value={value[index]} onChange={(e) => { @@ -294,6 +307,7 @@ export const Components: Record = { StartIcon="user-plus" className="my-2.5" onClick={() => { + autoFocusIndexRef.current = value.length; value.push(""); setValue(value); }}> @@ -312,6 +326,7 @@ export const Components: Record = { variant="button" StartIcon="user-plus" onClick={() => { + autoFocusIndexRef.current = value.length; value.push(""); setValue(value); }} diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts index 8e4efde9c2b852..27661c5053da67 100644 --- a/apps/web/playwright/booking-pages.e2e.ts +++ b/apps/web/playwright/booking-pages.e2e.ts @@ -314,6 +314,23 @@ test.describe("pro user", () => { await Promise.all(promises); }); + test.describe("mobile", () => { + test.use({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true }); + + test("focuses the newly added guest email input", async ({ page }) => { + await page.click('[data-testid="event-type-link"]'); + await selectFirstAvailableTimeSlotNextMonth(page); + await page.fill('[name="name"]', "test1234"); + await page.fill('[name="email"]', "test1234@example.com"); + + await page.locator('[data-testid="add-guests"]').click(); + await expect(page.locator('[id="guests.0"]')).toBeFocused(); + + await page.locator('[data-testid="add-another-guest"]').click(); + await expect(page.locator('[id="guests.1"]')).toBeFocused(); + }); + }); + test("Time slots should be reserved when selected", async ({ page, browser }) => { const initialUrl = page.url(); await page.locator('[data-testid="event-type-link"]').first().click();