Skip to content

DataViews: Fix ListView focus stealing from search input#71810

Closed
mecskyverse wants to merge 2 commits into
WordPress:trunkfrom
mecskyverse:fix/list-view-search-focus
Closed

DataViews: Fix ListView focus stealing from search input#71810
mecskyverse wants to merge 2 commits into
WordPress:trunkfrom
mecskyverse:fix/list-view-search-focus

Conversation

@mecskyverse

Copy link
Copy Markdown
Contributor

What?

Closes #67758

It Fixes focus stealing from search input in DataViews ListView layout.

Why?

In the DataViews ListView layout, when users type in the search field, focus would automatically jump to list items as the search
results updated. This made it impossible to complete typing a search query, as the focus would move away from the search input
mid-typing.

This issue was unique to ListView because it uses a Composite component with automatic focus management that updates
activeCompositeId whenever the selected item changes. GridView and TableView don't have this problem as they use simpler focus management without automatic focus updates.

How?

The fix adds focus protection by checking if the search input field is currently focused before moving focus to list items.
Specifically:

  1. In the useEffect for selection changes: Before updating activeCompositeId, check if the search field has focus
  2. In the selectCompositeItem function: Before calling focus() on composite items, check if the search field has focus

This approach preserves all existing functionality:

  • Keyboard navigation still works when not searching
  • Focus management works normally for mouse interactions
  • All accessibility features remain intact

Testing Instructions

  1. Open the storybook story for DataViews
  2. Switch to ListView layout
  3. Click in the search field
  4. Start typing a search query (e.g., "eu")
  5. Verify that focus remains in the search field throughout typing

Testing Instructions for Keyboard

  1. Open the storybook story for DataViews
  2. Tab to the search field
  3. Type a search query using only the keyboard
  4. Verify focus stays in the search field during typing
  5. Press Tab to move focus away from search and move it to list items
  6. Use arrow keys to navigate through list items

Screenshots or screencast

Before

Screen.Recording.2025-09-22.at.2.09.42.PM.mov

After

Screen.Recording.2025-09-22.at.2.08.09.PM.mov

@github-actions

github-actions Bot commented Sep 22, 2025

Copy link
Copy Markdown

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: mecskyverse <aakashverma1@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: allilevine <firewatch@git.wordpress.org>

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

@im3dabasia im3dabasia added [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Bug An existing feature does not function as intended labels Sep 22, 2025
@oandregal

Copy link
Copy Markdown
Member

Are you able to reproduce the bug in a non-storybook environment? I am not:

Screen.Recording.2025-09-30.at.10.46.50.mov

@oandregal

Copy link
Copy Markdown
Member

I was able now. It looks like it switches focus to the list when a single item has been matched:

Screen.Recording.2025-09-30.at.10.52.22.mov

This is nice if you have finished the search and the only element is the one you wanted to match: the focus is already in the result.

However, it's not when you are a slow typist, or the focus is switched too fast before you have finished searching. It's also inconvenient when you search, and you have introduced a typo: you want to fix it, but the focus has shifted away. This behavior seems to be doing more harm than good, let's remove it.

@ntsekouras

Copy link
Copy Markdown
Contributor

@mecskyverse it's been a while, but are you available to rebase and see to get this to the finish line?

setActiveCompositeId( targetCompositeItemId );

// Check if the search field is currently focused to prevent focus stealing during search.
const searchField = document.querySelector(

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

It would be better to just check whether active element is contained in the composite element (baseId). No need to check limit our check for the search input.

// Update the active composite item when the selected item changes.
useEffect( () => {
if ( selectedItem ) {
// Check if the search field is currently focused to prevent focus stealing during search.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This specific block of code should remain as is because it doesn't change any focus - it just sets the active composite id.

@ntsekouras

Copy link
Copy Markdown
Contributor

Thanks for the PR! I'm closing though since the issue was resolved here: #75999

@ntsekouras ntsekouras closed this Feb 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DataViews List View: Search input loses focus

4 participants