fix: popover ios issue (calcom#25696)

* fix: popover ios issue

* add comments

* more comments

Author: abhix4

apps/web/playwright/out-of-office.e2e.ts

@@ -209,7 +209,7 @@ test.describe("Out of office", () => {
     await goToOOOPage(page);
     await openOOODialog(page);
 
-    await selectToAndFromDates(page, "13", "22", true);
+    await selectToAndFromDates(page, "13", "22", "previous");
 
     // send request
     await saveAndWaitForResponse(page);
@@ -694,16 +694,21 @@ async function saveAndWaitForResponse(page: Page, expectedStatusCode = 200) {
   });
 }
 
-async function selectToAndFromDates(page: Page, fromDate: string, toDate: string, isRangeInPast = false) {
+async function selectToAndFromDates(
+  page: Page,
+  fromDate: string,
+  toDate: string,
+  month: "previous" | "next" = "next"
+) {
   await page.getByTestId("date-range").click();
   await page.locator(".rdp").waitFor({ state: "visible" });
 
-  const month = isRangeInPast ? "previous" : "next";
-
   await page.locator(`button[name="${month}-month"]`).click();
 
   await page.locator(`button[name="day"]:text-is("${fromDate}")`).nth(0).click();
   await page.locator(`button[name="day"]:text-is("${toDate}")`).nth(0).click();
+
+  await page.keyboard.press("Escape");
 }
 
 async function selectDateAndCreateOOO(
@@ -718,17 +723,8 @@ async function selectDateAndCreateOOO(
 ) {
   const t = await localize("en");
 
-  await page.getByTestId("date-range").click();
-  await page.locator(".rdp").waitFor({ state: "visible" });
+  await selectToAndFromDates(page, fromDate, toDate, month);
 
-  // Look for month navigation button
-  const monthButtonSelector = `button[name="${month}-month"]`;
-
-  await page.locator(monthButtonSelector).click();
-
-  await page.locator(`button[name="day"]:text-is("${fromDate}")`).nth(0).click();
-
-  await page.locator(`button[name="day"]:text-is("${toDate}")`).nth(0).click();
   if (editMode) {
     await page.locator(`text=${t("edit_an_out_of_office")}`).click();
   } else if (forTeamMember) {
@@ -757,12 +753,5 @@ async function goToOOOPage(page: Page, type: "individual" | "team" = "individual
 }
 
 async function openOOODialog(page: Page) {
-  const reasonListRespPromise = page.waitForResponse(
-    (response) => response.url().includes("outOfOfficeReasonList?batch=1") && response.status() === 200
-  );
-  const hasTeamPlanRespPromise = page.waitForResponse(
-    (response) => response.url().includes("hasTeamPlan?batch=1") && response.status() === 200
-  );
   await page.getByTestId("add_entry_ooo").click();
-  await Promise.all([reasonListRespPromise, hasTeamPlanRespPromise]);
 }

packages/ui/components/form/date-range-picker/DateRangePicker.tsx

@@ -96,7 +96,8 @@ export function DatePickerWithRange({
 
   return (
     <div className={classNames("grid gap-2", className)}>
-      <Popover.Root>
+      {/* modal prop required for iOS compatibility when nested inside Dialog modals */}
+      <Popover.Root modal>
         <Popover.Trigger asChild>
           <Button
             data-testid="date-range"

packages/ui/components/form/datepicker/DatePicker.tsx

@@ -36,7 +36,8 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className, label }
 
   return (
     <div className={classNames("grid gap-2", className)}>
-      <Popover.Root>
+      {/* modal prop required for iOS compatibility when nested inside Dialog modals */}
+      <Popover.Root modal>
         <Popover.Trigger asChild>
           <Button
             data-testid="pick-date"