Skip to content

react-dom: Ability to access window.event in development #11687

Closed
@ConradIrwin

Description

@ConradIrwin

Imported from #10474 (comment) at request of @gaearon

Do you want to request a feature or report a bug? Bug

What is the current behavior?

In development mode React uses invokeGuardedCallback to be able to catch errors without interrupting the normal "break on uncaught exceptions" feature of devtools.

In the current implementation of invokeGuardedCallback an event is created and dispatched, which allows for error handling without a try{ } catch block.

Unfortunately it has the side effect of overriding window.event, and so you are unable to access window.event within guarded callbacks when running React in development mode. In production mode it works fine.

We would like to access window.event at Superhuman to be able to detect where DOM focus is from the user's point of view. Usually this is document.activeElement, but in a few cases (like during a blur event, or when clicking between two iframes) the focus will end up in a different place.

This works fine in production, and we currently work around this in development mode by overriding ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDOMEventListener.handleTopLevel and maintiaining a reference to the event. In production mode we just use window.event.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

in development: https://jsfiddle.net/n782L2qg/, in production: https://jsfiddle.net/kqt2o7pr/. In both cases I would expect the alert to say window.event.type: click, but in development it says window.event.type: react-invokeguardedcallback

What is the expected behavior?

I would like a way to access window.event in development. I'm happy for this to be somewhat obscure, but ideally I would not have to use the secret internals to make this work.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Development 0.15 and 0.16 at least. probably before.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions