ImageURLInputUI: fix focus loss when settings are changed #58647
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
t-hamano
added
[Type] Bug
|
Size Change: +289 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
t-hamano
requested review from
Mamaduka,
afercia,
artemiomorales and
ciampo
and removed request for
Mamaduka
t-hamano
requested review from
kevin940726,
Mamaduka and
ellatrix
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core SVNIf you're a Core Committer, use this list when committing to GitHub Merge commitsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
artemiomorales
approved these changes
Feb 4, 2024
|
@artemiomorales Thanks for the review! The E2E test you added also makes sense to me 👍 |
|
Thank you for working on this, @t-hamano and @artemiomorales ! In theory, In this case, it looks like the trigger would be the toolbar button — I think it would be interesting to understand why focus couldn't be returned to that button in the first place ? We could also argue that the new behavior could be considered an improvement over returning focus on the toolbar button, but I think it's important to understand why we're not seeing the expected behavior in the first place. |
Focus returning to the toolbar button when the popover is closed is working correctly. This PR resolves an issue where content inside a popover loses focus when it is re-rendered. In this case, wouldn't you need your own focus control? |
|
Ah, got it! So, we're not closing a popover and opening a new one — the same If that's the case, then the current solution sounds good :) |
That's right. This problem is not an issue with the focus control provided by the |
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.
Fixes #58509
What?
This PR prevents focus loss from occurring in the
ImageURLInputUIcomponent used in the Image block and the Media & Text block.Why?
My guess is that the components inside the popover will appear and disappear as the URL settings change, causing the focus to be lost unless you explicitly control the focus.
How?
To control focus, this PR uses the following approaches:
URLPopovercomponent that theImageURLInputUIcomponent is internally rendering to receive the forwarded ref.Popovercomponent that theURLPopovercomponent is internally rendering.ImageURLInputUIcomponent focuses on the "first focusable element" each time its state changes based on theURLPopoverref.This approach is also used in the
LinkControlcomponent.This PR allows URLPopover components to accept the ref, but does not necessarily require them to opt in, so there should be no impact to consumers.
Additionally, I added E2E tests to prevent regressions. I've tried to test as much as possible to make sure that the focus is as expected, but it might be a bit redundant.
Testing Instructions for Keyboard
Screenshots or screencast
13efdee467e3a9beab19fd0f627e2160.mp4