[DevTools] Update inspected element on component filter changes

[everettbu]

Mirror of facebook/react#35599
Original author: eps1lon

---

Summary

We used to only update the inspected element when selected host element changes. This is fine when Components and the browser's Elements panel are alternate. With the inspected element pane you can now have the inspected element and browsers Elements panel side-by-side.

Now we update the inspected element when the filter changes. This is mostly interestiny when the filter becomes less restrictive i.e. we can inspect an element closer to the selected host element. When the filter becomes more restrictive, the store was already selecting the nearest parent.

The new behavior may be disorienting if you're in the Components panel so we could restrict the behavior to apply only when you're changing filter from within the inspected elements pane within the browsers Elements panel.

CleanShot.2026-01-22.at.14.54.22.mp4

How did you test this change?

• Manually verified in Chrome

[greptile-apps]

Greptile Summary

Updated inspected element behavior to respond to component filter changes. When filters are updated, the code now attempts to select a closer match for the currently selected host element by re-calling selectNode() with the value from window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0.

• Improved user experience when filters become less restrictive (allowing selection of elements closer to the selected host element)
• Follows the same access pattern as existing syncSelectionFromBuiltinElementsPanel method (line 998)
• Store already handles the case when current selection is filtered out by selecting a suitable parent, making this a no-op in those cases
• Minor typo in comment: "the the" should be "the"

Confidence Score: 4/5

• Safe to merge with one minor typo fix needed
• The change is straightforward and follows existing code patterns in the codebase. The logic is sound and improves UX when filters change. The only issue is a minor typo in the comment.
• No files require special attention

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/backend/agent.js	Added logic to update inspected element when component filters change; follows existing code patterns, includes a typo in comment

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

syntax: typo: "the the" should be "the"

Suggested change

	// The store will already select a suitable parent if the the current
	// The store will already select a suitable parent if the current

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/backend/agent.js
Line: 1092:1092

Comment:
**syntax:** typo: "the the" should be "the"

```suggestion
      // The store will already select a suitable parent if the current
```

How can I resolve this? If you propose a fix, please make it concise.

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.