[Input Date Picker] - calendar dropdown is not displaying on top of other content - Safari only

[DintaMel]

monday.com sync: #11121083862

Check existing issues

• I have checked for existing issues to avoid duplicates

Which Component

Input Date Picker

Actual Behavior

In Safari, the Input Date Picker is obstructed by other content. The dropdown values of the month/day/year are not visible until selected.

In Modal:

In Shell

Expected Behavior

I expect the calendar dropdown background to be opaque and to be able to see the dropdown values, similar to how it shows in chrome.

Reproduction Sample

https://codepen.io/DintaMel-the-lessful/pen/RNRxjqa

Reproduction Steps

1. Open codepen in Safari
2. Select Open button
3. Select dropdown for date
4. Observe issue

You can also view the issue outside of a dialog in this codepen.

1. Open codepen in Safari
2. Select Layer effects block
3. Select date input dropdown
4. Observe issue

Reproduction Version

5.0.0-next.81

Relevant Info

This is in Safari only. Edge, Firefox, and Chrome are all displaying correctly.

Regression?

4.0.0-next.28

Priority impact

impact - p1 - need for current milestone

Impact

Date picker in Safari is difficult to use without changes since users can't see all the values.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online