customer account ui extensions: unable to close datepicker inside modal

[mateusvahl]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.10.0",
"@shopify/ui-extensions-react": "2024.10.0",

Describe the bug

Unable to close datepicker popup:

1. In the following structuring, click in More actions, then Reschedule
2. Click in the calendar icon and pick a date

Issues:
1 ) Clicking in the modal does not closes the date picker
2) Clicking outside(overlay), causes the modal to close

Steps to reproduce the behavior:

export const Demo = () => {
  const [value, setValue] = useState('2024-11-20');
  return (
    <Page
      title="Order"
      primaryAction={
        <>
          <Button>Action</Button>
          <Button>Action</Button>
          <Button
            overlay={
              <Modal padding>
                <DateField label="YYYY-MM-DD" value={value} onChange={date => setValue(date)} />
              </Modal>
            }
          >
            Reschedule
          </Button>
        </>
      }
    />
  );
};

The same does not happen, if you only have a single primaryAction 🙇‍♂️:
( But clicking outside the datepicker still closes the modal 😥)

export const Demo = () => {
  const [value, setValue] = useState('2024-11-20');
  return (
    <Page
      title="Order"
      primaryAction={
        <Button
          overlay={
            <Modal padding>
              <DateField label="YYYY-MM-DD" value={value} onChange={date => setValue(date)} />
            </Modal>
          }
        >
          Reschedule
        </Button>
      }
    />
  );
};

Screenshots

Screen.Recording.2024-10-18.at.15.04.42.mov

[mateusvahl]

This seems to be fixed.

Thank you!

[mateusvahl]

Re-opening this, it seems to be happening again.

[mateusvahl]

This is a issue only when the modal is under a <Page primaryAction={...button with modal & data picker...} />

[sylvhama]

Thanks for reporting this, we will be working on a fix!

[mateusvahl]

@sylvhama We also noticed this causes the calendar to open below viewport, after open it, the scroll is also affected and you can no longer scroll the page.

[mateusvahl]

@sylvhama Do you want me to move this to community.shopify ?

[sylvhama]

@mateusvahl sorry for the late reply:

1. I have a fix on the way that should fix the problem with nested overlays;
2. Regarding the date picker overflow, I pinged the team in charge of that component and they made their own ticket for it. However I cannot provide any timeline of when this will be fixed.

[mateusvahl]

@sylvhama no worries, thanks for the update!