dillon1000/react
Commit
Browse files [DevTools] Make component search results directly navigable (#36786)
## Summary In a large react app, especially when components having 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 let 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 do you feel about this feature, if its helpful for devtools.
Changed paths8 files
First-parent comparisonpackages/react-devtools-inline/__tests__/__e2e__/components.test.js ModifiedM packages/react-devtools-shared/src/__tests__/treeContext-test.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js ModifiedM packages/react-devtools-shared/src/devtools/views/SearchInput.css ModifiedM packages/react-devtools-shared/src/devtools/views/SearchInput.js ModifiedA packages/react-devtools-shell/src/app/SearchableTable/index.js AddedM packages/react-devtools-shell/src/app/index.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…