[DevTools] Make component search results directly navigable (#36786)
Summary
In a large React app, especially when components have similar starting names like Table, TableColumn, TableCell, TableRow - all together 100+ components when rendered in a virtualized table - traversing the search result is sometimes difficult with scroll.
The component tree search only lets you step through matches one at a time (Enter / Shift+Enter). In large apps with many similarly-named components (Table, TableRow, TableCell, ...), a search can return 100+ matches in a virtualized list, making a specific match tedious to reach.
- The result counter is an editable, live-scrubbing index field: typing a number scrolls to that match as you type (clamped to range).
- Fixes re-search getting stuck: clearing the box and retyping the same term while a match was still selected snapped back to that same component. It now advances to the next match (find-next semantics).
How did you test this change?
Adds a SearchableTable example to the DevTools shell and unit tests for the new action and the retype behavior.
https://github.com/user-attachments/assets/7ea9801a-7bcb-4e8f-bf73-a5307a0fdbae
cc @hoxyq - Let me know what you feel about this feature, if it's helpful for DevTools.
Comments
No comments yet. Start the discussion.