En el sitio web que estoy desarrollando actualmente, los eventos nativos ( KeyboardEvents regulares) producen un comportamiento no deseado (usando versiones antiguas de state y refs), mientras que SyntheticEvents (que creo que son React.KeyboardEvents ) funcionan sin problemas. Estoy tratando de poner un oyente SyntheticEvent onKeyDown en el document (para que la pulsación de tecla se pueda manejar sin importar dónde esté el foco), ¿hay alguna forma de lograr esto? Para evitar esto, he creado un elemento contenedor en toda la aplicación con un oyente onKeyDown , sin embargo, esto no funciona bien porque no registra todas las pulsaciones (como cuando se enfoca un menú de hamburguesas o una foto de pantalla completa , lo que creo que sucede debido a su posicionamiento absoluto/fijo).

Ejemplo de uso de document.addEventListener("keydown", handleKeyDown) , que activa el elemento nativo, pero tiene un comportamiento incorrecto ( handleKeyDown usa referencias desactualizadas), pero registra pulsaciones de teclas globalmente:

• Rastreo de pila:
• Tipo de evento:

Ejemplo de uso de un envoltorio de aplicación en el que handleKeyDown funciona correctamente (las referencias son actuales), probablemente porque es un SyntheticEvent . Sin embargo, no registra clics globalmente:

• Rastreo de pila:
• Tipo de evento: