dillon1000/react

Commit

[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.
Browse files
Changed paths8 files
First-parent comparison
M packages/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 Modified
Patch

Files changed

Rendering syntax-highlighted changes…