[modal / date-picker] Calendar can be hidden by modal

[gpbmike]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

The calendar of a <calcite-input-date-picker> component can be hidden if it is opened in a modal.

Expected Behavior

I would expect the calendar to not be contained inside the modal like the native date picker.

Reproduction Sample

https://codepen.io/gpbmike/pen/qBwPbvp?editors=1000

Reproduction Steps

Add <calcite-input-date-picker> to "content" slot of <calcite-modal>.

Reproduction Version

2.7.0

Relevant Info

Chrome 123.0 MacOS 14.3.1

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

We use the native date picker instead.

Calcite package

• [ ] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Site Scan

[macandcheese]

You can use overlay-positioning="fixed" to escape the Modal container: https://codepen.io/mac_and_cheese/pen/ExJwKLR?editors=1000

[gpbmike]

You can use overlay-positioning="fixed" to escape the Modal container: https://codepen.io/mac_and_cheese/pen/ExJwKLR?editors=1000

Awesome. Forgot about that. Thanks.