Ability to access window.event in development (#11687) (#11696)

Before this change in development window.event was overridden
in invokeGuardedCallback.

After this change window.event is preserved in the browsers that
support it.

fixtures/dom/src/components/fixtures/error-handling/index.js

@@ -152,6 +152,44 @@ class SilenceErrors extends React.Component {
     );
   }
 }
+class GetEventTypeDuringUpdate extends React.Component {
+  state = {};
+
+  onClick = () => {
+    this.expectUpdate = true;
+    this.forceUpdate();
+  };
+
+  componentDidUpdate() {
+    if (this.expectUpdate) {
+      this.expectUpdate = false;
+      this.setState({eventType: window.event.type});
+      setTimeout(() => {
+        this.setState({cleared: !window.event});
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="test-fixture">
+        <button onClick={this.onClick}>Trigger callback in event.</button>
+        {this.state.eventType ? (
+          <p>
+            Got <b>{this.state.eventType}</b> event.
+          </p>
+        ) : (
+          <p>Got no event</p>
+        )}
+        {this.state.cleared ? (
+          <p>Event cleared correctly.</p>
+        ) : (
+          <p>Event failed to clear.</p>
+        )}
+      </div>
+    );
+  }
+}
 
 class SilenceRecoverableError extends React.Component {
   render() {
@@ -318,6 +356,21 @@ export default class ErrorHandlingTestCases extends React.Component {
           </TestCase.ExpectedResult>
           <TrySilenceFatalError />
         </TestCase>
+
+        {window.hasOwnProperty('event') ? (
+          <TestCase
+            title="Error handling does not interfere with window.event"
+            description="">
+            <TestCase.Steps>
+              <li>Click the "Trigger callback in event" button</li>
+            </TestCase.Steps>
+            <TestCase.ExpectedResult>
+              You should see "Got <b>click</b> event" and "Event cleared
+              successfully" below.
+            </TestCase.ExpectedResult>
+            <GetEventTypeDuringUpdate />
+          </TestCase>
+        ) : null}
       </FixtureSet>
     );
   }

packages/shared/invokeGuardedCallback.js

@@ -96,6 +96,11 @@ if (__DEV__) {
       // the error event at all.
       let didError = true;
 
+      // Keeps track of the value of window.event so that we can reset it
+      // during the callback to let user code access window.event in the
+      // browsers that support it.
+      let windowEvent = window.event;
+
       // Create an event handler for our fake event. We will synchronously
       // dispatch our fake event using `dispatchEvent`. Inside the handler, we
       // call the user-provided callback.
@@ -106,6 +111,18 @@ if (__DEV__) {
         // nested call would trigger the fake event handlers of any call higher
         // in the stack.
         fakeNode.removeEventListener(evtType, callCallback, false);
+
+        // We check for window.hasOwnProperty('event') to prevent the
+        // window.event assignment in both IE <= 10 as they throw an error
+        // "Member not found" in strict mode, and in Firefox which does not
+        // support window.event.
+        if (
+          typeof window.event !== 'undefined' &&
+          window.hasOwnProperty('event')
+        ) {
+          window.event = windowEvent;
+        }
+
         func.apply(context, funcArgs);
         didError = false;
       }