Date Field's date picker doesn't work inside a modal

Extensions
1

The date picker (triggered via the calendar icon) in a date field is not behaving correctly when placed inside a modal.

  • The calendar popup does not fully expand/stretch within the modal

  • Parts of the calendar become inaccessible

  • Scrolling is limited or not possible inside the modal

Outside of a modal, the date picker works as expected (you can scroll and view the full calendar). Inside a modal, however, the full UI cannot be seen or interacted with properly.

Has anyone encountered this or found a workaround?

2

Hey @0_0 - thanks for flagging this. This does sound odd.

Just to help me dig into this on our end, could you let me know which customer account extension target you’re using and which API version you’re on? If you’re open to sharing a minimal repro as well that would be super helpful, just want to make sure I can try to replicate this correctly.

Hope to hear from you soon!

3

api_version = “2026-01”
target = “customer-account.profile.block.render”

target doesnt matter

 function Extension() {
  return (
    <>
      <s-button command="--show" commandFor="modal-1">
        Add Product
      </s-button>
      <s-modal id="modal-1" heading="Return Policy">
        <s-date-field
          label="Pickup date"
          defaultValue="2025-10-01"
        ></s-date-field>
      </s-modal>
    </>
  );
}
4

Hey @0_0 - thanks for the details and the code sample, really appreciate this. We’re looking into this on our end now and I’ll loop back with you once I have more info.

1 Like