Skip to content

FormTokenField: Fix focus lost on tab when __experimentalExpandOnFocus is set #70591

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
Jul 4, 2025
Merged

FormTokenField: Fix focus lost on tab when __experimentalExpandOnFocus is set #70591

merged 4 commits into from
Jul 4, 2025

Conversation

yogeshbhutkar
Copy link
Contributor

What, Why, and How?

Closes #66571

This PR fixes a focus loss issue triggered during tab navigation when the FormTokenField component is used inside a Modal.

The problem arises because, when tabbing, the SuggestionList briefly receives focus. This triggers the onBlur logic, which collapses the SuggestionList prematurely and results in a loss of focus.

To address this, the PR introduces a keydown handler for the Tab key. This ensures the SuggestionList is collapsed before the default Tab behaviour is executed, allowing the focus to correctly move to the next focusable element.

Testing Instructions

  1. Create a new post.
  2. Insert a paragraph within it.
  3. From its Block Toolbar, click on Options, then Create pattern.
  4. Try tabbing through the Modal and confirm that the modal does not close abruptly, and also that the focus is preserved within the modal.

Testing Instructions for Keyboard

Same.

Screencast

pr-demo.mov

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review July 2, 2025 09:23
@yogeshbhutkar yogeshbhutkar requested a review from ajitbohra as a code owner July 2, 2025 09:23
@github-actions GitHub Actions
Copy link

github-actions bot commented Jul 2, 2025 •
edited
Loading

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

t-hamano
t-hamano reviewed Jul 3, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR!

Although this PR works fine, I think this issue is not directly related to the Modal component. That is, it is an issue with the component itself that the focus is lost when pressing the Tab key when the __experimentalExpandOnFocus property is true. So, according to the PR title and changelog entry, some may misunderstand that the issue only occurs in the Modal component, so it would be good to fix that.

Another thing worth noting is that this PR changes the behavior when the __experimentalExpandOnFocus prop is false.

trunk - Pressing the Tab key doesn't close the suggestions list:

trunk.mp4

This PR - Pressing the Tab key closes the suggestions list:

pr.mp4

The behavior in trunk looks like a bug to me 🤔

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components labels Jul 3, 2025
@t-hamano t-hamano requested a review from a team July 3, 2025 08:58
tyxla
tyxla approved these changes Jul 3, 2025
View reviewed changes
Copy link
Member

@tyxla tyxla left a comment •
edited
Loading

Choose a reason for hiding this comment

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

This works well for me 👍 Thanks @yogeshbhutkar!

I'd suggest reorganizing the code a bit differently, but I don't think it is a major blocker for this fix.

@yogeshbhutkar
chore: code refactor
f342144 
* Also updates CHANGELOG for better intent
@yogeshbhutkar yogeshbhutkar changed the title FormTokenField: Fix focus lost on Tab when used within Modal FormTokenField: Fix focus lost on tab when __experimentalExpandOnFocus is set Jul 3, 2025
@yogeshbhutkar yogeshbhutkar requested a review from t-hamano July 3, 2025 12:30
t-hamano
t-hamano approved these changes Jul 4, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@t-hamano t-hamano merged commit f7ba498 into WordPress:trunk Jul 4, 2025
69 of 71 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.2 milestone Jul 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tyxla tyxla tyxla approved these changes

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 21.2
Development

Successfully merging this pull request may close these issues.

Create Pattern Modal: Tab focus is lost
3 participants
@yogeshbhutkar @tyxla @t-hamano