DataViews: Fix ListView focus stealing from search input#71810
DataViews: Fix ListView focus stealing from search input#71810mecskyverse wants to merge 2 commits into
Conversation
|
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 If 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. |
|
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 |
|
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.movThis 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. |
|
@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( |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
This specific block of code should remain as is because it doesn't change any focus - it just sets the active composite id.
|
Thanks for the PR! I'm closing though since the issue was resolved here: #75999 |
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
Compositecomponent with automatic focus management that updatesactiveCompositeIdwhenever 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:
useEffectfor selection changes: Before updatingactiveCompositeId, check if the search field has focusselectCompositeItemfunction: Before callingfocus()on composite items, check if the search field has focusThis approach preserves all existing functionality:
Testing Instructions
Testing Instructions for Keyboard
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