Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix zindex on react-datepicker popover #3376

Merged
merged 3 commits into from
Apr 23, 2020
Merged

Conversation

snide
Copy link
Contributor

@snide snide commented Apr 22, 2020

Summary

Small one-liner. Because EuiDatePicker doesn't actually use EuiPopover (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 (like EuiDataGrid, 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

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in IE11 and Firefox
  • [ ] Props have proper autodocs
  • Added documentation examples
  • Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@snide snide requested a review from cchaos April 22, 2020 21:56
@snide snide changed the title Fix zindex on react-datepicker Fix zindex on react-datepicker popover Apr 22, 2020
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3376/

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I think this makes sense as a temporary solution. I really think we should end up using our own input and popover service to serve the inline version. It would probably also fix #3367 .

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3376/

@snide snide merged commit b16178f into elastic:master Apr 23, 2020
@snide snide deleted the dp_zindex branch April 23, 2020 16:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants