diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-add.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-add.png index 87c3a5be..bc36f902 100644 Binary files a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-add.png and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-add.png differ diff --git a/e2e/vendors/vendors.spec.ts b/e2e/vendors/vendors.spec.ts index 988e0a7f..8c63f029 100644 --- a/e2e/vendors/vendors.spec.ts +++ b/e2e/vendors/vendors.spec.ts @@ -497,6 +497,39 @@ test.describe("Vendor directory prototype parity", () => { }); expect(floatedMetrics.labelClientWidth).toBeGreaterThanOrEqual(floatedMetrics.labelScrollWidth); expect(floatedMetrics.legendWidth).toBeGreaterThanOrEqual(floatedMetrics.labelWidth); + + // Scrolling focus down the form and back to Company must keep the floated label + // inside the dialog's visible scrollport. + const dialogContent = page + .getByRole("dialog", { name: /Add Vendor/ }) + .locator(".MuiDialogContent-root"); + await page.getByLabel("Technician name (optional)").click(); + await expect + .poll(() => dialogContent.evaluate((element) => element.scrollTop)) + .toBeGreaterThan(0); + await page.getByRole("combobox", { name: "Company (required)" }).click(); + await expect + .poll(() => dialogContent.evaluate((element) => element.scrollTop)) + .toBeLessThanOrEqual(1); + await expect(floatedCompanyLabel).toBeVisible(); + const labelScrollportMetrics = await floatedCompanyLabel.evaluate((element) => { + const content = element.closest(".MuiDialogContent-root"); + return { + labelTop: element.getBoundingClientRect().top, + labelBottom: element.getBoundingClientRect().bottom, + dialogTop: content?.getBoundingClientRect().top ?? Number.NaN, + dialogBottom: content?.getBoundingClientRect().bottom ?? Number.NaN, + overflowY: content ? getComputedStyle(content).overflowY : "", + }; + }); + expect(["auto", "scroll"]).toContain(labelScrollportMetrics.overflowY); + expect(labelScrollportMetrics.labelTop).toBeGreaterThanOrEqual( + labelScrollportMetrics.dialogTop - 1, + ); + expect(labelScrollportMetrics.labelBottom).toBeLessThanOrEqual( + labelScrollportMetrics.dialogBottom + 1, + ); + await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100"); await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue( "dispatch@gateway.test", diff --git a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx index 002a81bf..55e3506d 100644 --- a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx +++ b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx @@ -54,7 +54,12 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) { Register a vendor company and its technicians. - + {form.loadErrorMessage !== null && (