OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 00:20:04 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[DevTools] Use documentElement to override cmd+F (#34734)

Browse Source 
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.
This commit is contained in:
Sebastian Markbåge 2025-10-05 08:13:22 -04:00 committed by GitHub
parent a2329c10ff
commit 0e79784702
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/react-devtools-shared/src/devtools/views/SearchInput.js vendored
View File

@ -64,8 +64,9 @@ export default function SearchInput({
const handleKeyDown = (event: KeyboardEvent) => {
const {key, metaKey} = event;
if (key === 'f' && metaKey) {
if (inputRef.current !== null) {
inputRef.current.focus();
const inputElement = inputRef.current;
if (inputElement !== null) {
inputElement.focus();
event.preventDefault();
event.stopPropagation();
}
@ -75,10 +76,14 @@ export default function SearchInput({
// It's important to listen to the ownerDocument to support the browser extension.
// Here we use portals to render individual tabs (e.g. Profiler),
// and the root document might belong to a different window.
const ownerDocument = inputRef.current.ownerDocument;
ownerDocument.addEventListener('keydown', handleKeyDown);
const ownerDocumentElement = inputRef.current.ownerDocument.documentElement;
if (ownerDocumentElement === null) {
return;
}
ownerDocumentElement.addEventListener('keydown', handleKeyDown);
return () => ownerDocument.removeEventListener('keydown', handleKeyDown);
return () =>
ownerDocumentElement.removeEventListener('keydown', handleKeyDown);
}, []);
return (