Fix popover toggle buttons #30392
Closed
Fix popover toggle buttons #30392
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +119 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
7 tasks
I'd been tinkering with an approach like that and made #30397. It has test failures at the moment but I believe they may all be snags on implementation detail. Relating to the implementation in this PR, I'd like to note that checking against |
|
If the button doesn't receive focus, will the blur event still happen? |
Yes because the button's closest focusable container gets focus. |
|
Oh, something I just remembered, buttons inside toolbars are receiving focus even in UAs that don't normally focus them (I think it's something done by ToolbarItem/reakit). This means all the toggles/popovers affected by this PR will work fine with the logic used. |
6 tasks
|
@stokesman So does this test well or is there anything missing? |
|
I tested today in Safari and the toggles in
But that was due to testing in Firefox and doesn't apply to Safari (though it is supposed to with reakit's focus normalization). So now it seems odd that this even works for I tried a couple of structure tweaks to the toolbar in Besides all that, I know of one more toggle that wants fixing, Format Library's link component. |
stokesman
reviewed
Apr 21, 2021
ellatrix
force-pushed
the
try/toggle-fix
branch
from
7f8cc7e
to
49f9bf7
Compare
7 tasks
|
Not sure if I jumped the gun but I tested this and it fixes what it's supposed to (tested in Safari and Chromium). Yet I did run into some trouble with the post date popover not closing when somewhere outside the block is clicked (both browers). Here's a recording: post-date-popover-dismissal.mp4 |
ellatrix
force-pushed
the
try/toggle-fix
branch
from
cbffcf8
to
6895cc1
Compare
|
Oh yeah, yet another new popover toggle which could use this treatment is in |
|
I'm back again 👋 . I just made #35024 to help break this up a bit. It fixes the toggle/popover combos in So if that PR looks good, between it and this one, I think we'd finally knock out all the misbehaving toggles. |
stokesman
force-pushed
the
try/toggle-fix
branch
from
6895cc1
to
aebc03e
Compare
|
I assumed it'd be okay to rebase and fix conflicts here and did so. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Alternative to #27406.
I don't think there's a need to introduce another prop and public API to the Popover component. When
onCloseis called, we can check if the active element is the toggle button and let the toggle button handle closing instead. The Popover component should not concern itself with toggle buttons and what controls it.Ideally this should only be implemented once with a drop down or toggleable popover component instead of needing to handle this in different places.
How has this been tested?
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).