Fix zindex on react-datepicker popover #3376
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Small one-liner. Because
EuiDatePicker
doesn't actually useEuiPopover
(which uses portals), but instead mimics their look, they need to carry a z-index to them in case they compete with other Dom sibling level components that might have a z-index (likeEuiDataGrid
, which uses it for focus).This fix simply applies the z-index we use for these sorts of popovers to the similar element that react-datepicker creates. In most cases, as long as there isn't deep nesting, this should help it stay within the proper z-level versus its peers.
This style of fix was confirmed downstream by @pickypg. I checked the various usages (like inline) to make sure this z-index would not compete with other elements (like Flyouts).
Checklist
[ ] Props have proper autodocsAdded documentation examplesAdded or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**Checked for breaking changes and labeled appropriatelyChecked for accessibility including keyboard-only and screenreader modes