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!

[lihaokx]

@sylvhama Would you like to confirm if this ticket still relevant? thanks

[sylvhama]

@lihaokx yes it is, sorry for taking so long but we are still trying to figure out a solution to handle nested overlays 😅

[mateusvahl]

We have temporary removed that Pick a date option, I guess we could redirect to a new page with a calendar open.

It's a tricky one:

• Index: Needs to open on top an existent overlay.
• Position: May open from top/bottom depending of the content size.
• Accessibility: Needs to move focus in the calendar(and all the keybindings), then restore back to the input.

[sylvhama]

@mateusvahl sorry to hear you had to find a workaround.

I thought of another workaround to close a nested overlay, you could rely on the overlay API to close it via the overlay id, see https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/apis/ui (click on Ui to expand the details).