| Summary: | Unexpected focus-within behaviour when layout is forced during blur event | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Bastien Caudan <bastien.caudan> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | bfulgham, ntim, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
On a case where an element visibility is conditioned by a :focus-within pseudo class: <style> .dropdown .dropdown-content { visibility: hidden; } .dropdown:focus-within .dropdown-content { visibility: visible; } </style> <div class="dropdown"> <label tabindex="0">Click</label> <ul tabindex="0" class="dropdown-content"> <li><a href="#foo">Go to foo</a></li> <li><a href="#bar">Go to bar</a></li> </ul> </div> When switching the focus to an inner element (clicking on one of the links) with a forced layout during the blur event, the inner element is not focused. Without the forced layout on the blur event it behaves as expected. I have setup a reproduction case here: https://codesandbox.io/s/stupefied-andras-p79o0x?file=/index.html Other browsers seem to handle this case without issue.