-
Notifications
You must be signed in to change notification settings - Fork 36
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
STCOM-1238 Accordion vs overlay z-index issues. #2240
Conversation
…ighest z-index when focus enters them.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the detailed technical explanation in the PR description. I'd love to see a bit of that documentation/explanation filter down into comments directly on Accordion.js itself so the next person looking at the code can, in fact, just look at the code, without needing to dig up this PR to understand why we had to do things this way.
lib/Accordion/Accordion.js
Outdated
// only update the accordion z-index if it does not contain focus or if it's not | ||
// already the highest z-index among other accordions. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pedantic: s/or/and/
|
* Accordions retain their z-index after being blurred, and assume the highest z-index when focus enters them. * log changes * remove unnecessary addition to z-index * semi * add comments to code
Problem
Accordions with overlay components could have their overlays overlapped by other accordions due to z-index issues.
Approach
What we've previously done...
Accordions content would overlap overlays/dropdowns from previous accordions... (render with reverse z-index order to accordion index)
fixed, but..
Accordions content would overlap overlays/dropdowns from the following accordions...(have the focused accordion assume highest zindex from the set)
fixed, but
Accordions/overlays would go back to being overlapped if focus left the accordion or went to another pane...
In this PR, when focus moves to the accordion, it will find/assume the highest z-index among other accordions. It will retain this same z-index after it is blurred. If an accordion already has the highest z-index among accordions, it will not update its own. The z-indexes do continue to grow, but only for the life of a view... if navigation happens or accordions leave the DOM, all z-indices will be reset upon return.