[DevTools] Use documentElement to override cmd+F (#34734)
We override Cmd+F to jump to our search input instead of searching through the HTML. This is ofc critical since our view virtualized. However, Chrome DevTools installs its own listener on the document as well (in the bubble phase) so if we prevent it at the document level it's too late and it ends up stealing the focus instead. If we instead listen at the documentElement it works as intended.
Sebastian Markbåge committed
Oct 5, 2025 at 08:13 UTC
0e79784702927f1d1c6c212475e7c5141fa13a8a
1 file changed
+10
-5
packages/react-devtools-shared/src/devtools/views/SearchInput.js
+10
-5
@@ -64,8 +64,9 @@ export default function SearchInput({
64
const handleKeyDown = (event: KeyboardEvent) => {
65
const {key, metaKey} = event;
66
if (key === 'f' && metaKey) {
67
- if (inputRef.current !== null) {
68
- inputRef.current.focus();
67
+ const inputElement = inputRef.current;
68
+ if (inputElement !== null) {
69
+ inputElement.focus();
70
event.preventDefault();
71
event.stopPropagation();
72
}
@@ -75,10 +76,14 @@ export default function SearchInput({
76
// It's important to listen to the ownerDocument to support the browser extension.
77
// Here we use portals to render individual tabs (e.g. Profiler),
78
// and the root document might belong to a different window.
78
- const ownerDocument = inputRef.current.ownerDocument;
79
- ownerDocument.addEventListener('keydown', handleKeyDown);
79
+ const ownerDocumentElement = inputRef.current.ownerDocument.documentElement;
80
+ if (ownerDocumentElement === null) {
81
+ return;
82
+ }
83
+ ownerDocumentElement.addEventListener('keydown', handleKeyDown);
84
81
- return () => ownerDocument.removeEventListener('keydown', handleKeyDown);
85
+ return () =>
86
+ ownerDocumentElement.removeEventListener('keydown', handleKeyDown);
87
}, []);
88
89
return (