Fix:- Fixed dev tools inspect mode on Shadow dom (#26888)
Fixes #26200 ### PR explanation I tried to induce the change by the `event.composed` to check whether the event was created in a ShadowRoot, And replaced `pointerOver` with `pointerMove`, pointerOver event did not fired correctly Before PR:- https://github.com/facebook/react/assets/72331432/67a33dcd-447f-4c68-9c3c-ad954baddeb8 After PR:- https://github.com/facebook/react/assets/72331432/9f986ff2-785f-4cba-a504-44f82ea9fc5a --------- Co-authored-by: Biki das <bikidas@Bikis-MacBook-Pro.local>
BIKI DAS committed
Jun 7, 2023 at 21:08 UTC
910045696bb5f693acb77890e6750c5e4659b420
1 file changed
+16
-5
packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+16
-5
@@ -46,7 +46,7 @@ export default function setupHighlighter(
46
window.addEventListener('mouseover', onMouseEvent, true);
47
window.addEventListener('mouseup', onMouseEvent, true);
48
window.addEventListener('pointerdown', onPointerDown, true);
49
- window.addEventListener('pointerover', onPointerOver, true);
49
+ window.addEventListener('pointermove', onPointerMove, true);
50
window.addEventListener('pointerup', onPointerUp, true);
51
} else {
52
agent.emit('startInspectingNative');
@@ -74,7 +74,7 @@ export default function setupHighlighter(
74
window.removeEventListener('mouseover', onMouseEvent, true);
75
window.removeEventListener('mouseup', onMouseEvent, true);
76
window.removeEventListener('pointerdown', onPointerDown, true);
77
- window.removeEventListener('pointerover', onPointerOver, true);
77
+ window.removeEventListener('pointermove', onPointerMove, true);
78
window.removeEventListener('pointerup', onPointerUp, true);
79
} else {
80
agent.emit('stopInspectingNative');
@@ -151,14 +151,17 @@ export default function setupHighlighter(
151
event.preventDefault();
152
event.stopPropagation();
153
154
- selectFiberForNode(((event.target: any): HTMLElement));
154
+ selectFiberForNode(getEventTarget(event));
155
}
156
157
- function onPointerOver(event: MouseEvent) {
157
+ let lastHoveredNode: HTMLElement | null = null;
158
+ function onPointerMove(event: MouseEvent) {
159
event.preventDefault();
160
event.stopPropagation();
161
161
- const target = ((event.target: any): HTMLElement);
162
+ const target: HTMLElement = getEventTarget(event);
163
+ if (lastHoveredNode === target) return;
164
+ lastHoveredNode = target;
165
166
if (target.tagName === 'IFRAME') {
167
const iframe: HTMLIFrameElement = (target: any);
@@ -197,4 +200,12 @@ export default function setupHighlighter(
200
// because those are usually unintentional as you lift the cursor.
201
{leading: false},
202
);
203
+
204
+ function getEventTarget(event: MouseEvent): HTMLElement {
205
+ if (event.composed) {
206
+ return (event.composedPath()[0]: any);
207
+ }
208
+
209
+ return (event.target: any);
210
+ }
211
}