Conversation
Fixes #17855 When hovering a component in the DevTools Components inspector, a highlight overlay appears on the inspected page. The highlight is cleared via `onMouseLeave` on the tree container `div`. But this React synthetic event only fires when the pointer transitions between elements _within the same document_. When the user moves their mouse out of the DevTools panel window entirely (e.g. to the browser viewport), no element in the React tree receives `mouseleave`, so `clearHostInstanceHighlight` is never sent over the bridge and the overlay persists on the page. The fix adds a native `mouseleave` listener on the DevTools panel's `ownerDocument` in `Tree.js`. When the pointer exits the panel viewport, it fires `clearHighlightHostInstance` and removes the overlay. Using `ownerDocument` (rather than document) is consistent with the existing pattern in `Tree.js` for browser extension compatibility. How did you test this change? Tested manually using the Chrome extension: 1. Opened React DevTools → Components tab on a React app 2. Hovered a component in the tree — highlight appeared on the page ✓ 3. Moved the mouse out of the DevTools panel into the browser viewport — highlight cleared immediately ✓ (previously it persisted) 4. Moved the mouse back into the panel and hovered a component — highlighting still works normally ✓ 5. Unhovered within the panel — highlight still clears correctly ✓ Ran the DevTools test suite: yarn test --no-watchman ReactDevTools — all tests pass.
## Summary
`getDataType` collapsed both `Infinity` and `-Infinity` to the
`'infinity'` data type, so a `-Infinity` value coming from inspected
props/state/hooks was rehydrated on the frontend as `Infinity`.
This adds a `'-infinity'` `DataType`, routes it through
`dehydrate`/`hydrate` alongside the existing `'infinity'` arm, and makes
`smartParse`/`smartStringify` (used for editable hook values) symmetric.
## Files
- `packages/react-devtools-shared/src/utils.js` — extend `DataType`,
split sign in `getDataType`, route `'-infinity'` through
`formatDataForPreview`.
- `packages/react-devtools-shared/src/hydration.js` — `dehydrate` and
`hydrate` cases for `'-infinity'`.
- `packages/react-devtools-shared/src/devtools/utils.js` — `smartParse`
accepts `'-Infinity'`; `smartStringify` returns `'-Infinity'` for
negative infinite values.
-
`packages/react-devtools-shared/src/__tests__/inspectedElement-test.js`
and `legacy/inspectElement-test.js` — added `minus_infinity={-Infinity}`
to the simple-data-types tests + snapshots.
-
`packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js`
— added `minusInfinity` to the dev shell so the path is exercised
manually.
## Test plan
- [x] `yarn prettier` / `yarn linc`
- [x] `yarn flow dom-node` — no errors
- [x] `yarn test --silent --no-watchman -t "should support simple data
types"` (source channel)
- [x] `yarn test-www --silent --no-watchman -t "should support simple
data types"` (www-modern)
- [ ] `yarn test-build-devtools` — relies on a built bundle; left to CI
per repo policy.
Fixes #32552
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )