Fix Docs: Date Picker display in Dialogs across browsers by setting Popover modal={true}

[jassibacha]

Problem

The Date Picker's Calendar component was not consistently appearing inside Dialog components across several browsers, notably Firefox, Safari, and iOS Chrome. This issue hindered the usability and functionality of the Date Picker in modal scenarios, affecting developers and end-users alike.

Solution

After investigating various approaches, I discovered that setting modal={true} on the <Popover> component housing the Calendar effectively resolves the display issues. This adjustment ensures that the Popover behaves as expected within dialogs, making the Date Picker fully operational across the affected browsers.

Changes Made

• Refined the Date Picker documentation with a callout to highlight the importance of the modal={true} prop for ensuring browser compatibility in dialog scenarios.

Impact

These changes enhance the Date Picker's reliability and functionality by ensuring its visibility in modal contexts across all major browsers and it should also enhance accessibility by limiting screen reader visibility to the Popover's content.

As I found myself going down a pretty big rabbit hole to resolve this, which initially led me to difference suggestions such as removing initialFocus from the Calendar (#910), I realize it couldn't hurt to try and add a small note to the docs to help people skip this headache and implement a better solution.

Additional Notes

This solution was identified by @morgan4080 in this thread.

It might be worth adding a note/callout on Popover as well.

[vercel]

@jassibacha is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.