Set currentTarget on synthetic events

Fixes facebook#658, fixes facebook#659.
rtfeldman · Jan 4, 2014 · 33dcf8a · 33dcf8a
1 parent 80d7d2d
commit 33dcf8a
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 10 deletions.
diff --git a/src/core/ReactDefaultInjection.js b/src/core/ReactDefaultInjection.js
@@ -29,6 +29,7 @@ var ReactDOMSelect = require('ReactDOMSelect');
 var ReactDOMTextarea = require('ReactDOMTextarea');
 var ReactEventEmitter = require('ReactEventEmitter');
 var ReactEventTopLevelCallback = require('ReactEventTopLevelCallback');
+var ReactMount = require('ReactMount');
 var ReactPerf = require('ReactPerf');
 var ReactRootIndex = require('ReactRootIndex');
 
@@ -53,10 +54,11 @@ var ReactUpdates = require('ReactUpdates');
 function inject() {
   ReactEventEmitter.TopLevelCallbackCreator = ReactEventTopLevelCallback;
   /**
-   * Inject module for resolving DOM hierarchy and plugin ordering.
+   * Inject modules for resolving DOM hierarchy and plugin ordering.
    */
   EventPluginHub.injection.injectEventPluginOrder(DefaultEventPluginOrder);
   EventPluginHub.injection.injectInstanceHandle(ReactInstanceHandles);
+  EventPluginHub.injection.injectMount(ReactMount);
 
   /**
    * Some important event plugins included by default (without having to require

diff --git a/src/core/__tests__/ReactEventEmitter-test.js b/src/core/__tests__/ReactEventEmitter-test.js
@@ -34,10 +34,16 @@ require('mock-modules')
 var keyOf = require('keyOf');
 var mocks = require('mocks');
 
-var EventPluginHub;
 var ReactMount = require('ReactMount');
+var idToNode = {};
 var getID = ReactMount.getID;
-var setID = ReactMount.setID;
+var setID = function(el, id) {
+  ReactMount.setID(el, id);
+  idToNode[id] = el;
+};
+var oldGetNode = ReactMount.getNode;
+
+var EventPluginHub;
 var ReactEventEmitter;
 var ReactTestUtils;
 var TapEventPlugin;
@@ -93,17 +99,22 @@ describe('ReactEventEmitter', function() {
     TapEventPlugin = require('TapEventPlugin');
     ReactMount = require('ReactMount');
     EventListener = require('EventListener');
-    getID = ReactMount.getID;
-    setID = ReactMount.setID;
     ReactEventEmitter = require('ReactEventEmitter');
     ReactTestUtils = require('ReactTestUtils');
+    ReactMount.getNode = function(id) {
+      return idToNode[id];
+    };
     idCallOrder = [];
     tapMoveThreshold = TapEventPlugin.tapMoveThreshold;
     EventPluginHub.injection.injectEventPluginsByName({
       TapEventPlugin: TapEventPlugin
     });
   });
 
+  afterEach(function() {
+    ReactMount.getNode = oldGetNode;
+  });
+
   it('should store a listener correctly', function() {
     registerSimpleTestHandler();
     var listener = ReactEventEmitter.getListener(getID(CHILD), ON_CLICK_KEY);
@@ -162,6 +173,38 @@ describe('ReactEventEmitter', function() {
     expect(idCallOrder[2]).toBe(getID(GRANDPARENT));
   });
 
+  it('should set currentTarget', function() {
+    ReactEventEmitter.putListener(
+      getID(CHILD),
+      ON_CLICK_KEY,
+      function(event) {
+        recordID(getID(CHILD));
+        expect(event.currentTarget).toBe(CHILD);
+      }
+    );
+    ReactEventEmitter.putListener(
+      getID(PARENT),
+      ON_CLICK_KEY,
+      function(event) {
+        recordID(getID(PARENT));
+        expect(event.currentTarget).toBe(PARENT);
+      }
+    );
+    ReactEventEmitter.putListener(
+      getID(GRANDPARENT),
+      ON_CLICK_KEY,
+      function(event) {
+        recordID(getID(GRANDPARENT));
+        expect(event.currentTarget).toBe(GRANDPARENT);
+      }
+    );
+    ReactTestUtils.Simulate.click(CHILD);
+    expect(idCallOrder.length).toBe(3);
+    expect(idCallOrder[0]).toBe(getID(CHILD));
+    expect(idCallOrder[1]).toBe(getID(PARENT));
+    expect(idCallOrder[2]).toBe(getID(GRANDPARENT));
+  });
+
   it('should support stopPropagation()', function() {
     ReactEventEmitter.putListener(
       getID(CHILD),

diff --git a/src/event/EventPluginHub.js b/src/event/EventPluginHub.js
@@ -85,6 +85,12 @@ var EventPluginHub = {
    */
   injection: {
 
+    /**
+     * @param {object} InjectedMount
+     * @public
+     */
+    injectMount: EventPluginUtils.injection.injectMount,
+
     /**
      * @param {object} InjectedInstanceHandle
      * @public

diff --git a/src/event/EventPluginUtils.js b/src/event/EventPluginUtils.js
@@ -22,6 +22,28 @@ var EventConstants = require('EventConstants');
 
 var invariant = require('invariant');
 
+/**
+ * Injected dependencies:
+ */
+
+/**
+ * - `Mount`: [required] Module that can convert between React dom IDs and
+ *   actual node references.
+ */
+var injection = {
+  Mount: null,
+  injectMount: function(InjectedMount) {
+    injection.Mount = InjectedMount;
+    if (__DEV__) {
+      invariant(
+        InjectedMount && InjectedMount.getNode,
+        'EventPluginUtils.injection.injectMount(...): Injected Mount module ' +
+        'is missing getNode.'
+      );
+    }
+  }
+};
+
 var topLevelTypes = EventConstants.topLevelTypes;
 
 function isEndish(topLevelType) {
@@ -39,6 +61,7 @@ function isStartish(topLevelType) {
          topLevelType === topLevelTypes.topTouchStart;
 }
 
+
 var validateEventDispatches;
 if (__DEV__) {
   validateEventDispatches = function(event) {
@@ -90,7 +113,10 @@ function forEachEventDispatch(event, cb) {
  * @param {string} domID DOM id to pass to the callback.
  */
 function executeDispatch(event, listener, domID) {
-  listener(event, domID);
+  event.currentTarget = injection.Mount.getNode(domID);
+  var returnValue = listener(event, domID);
+  event.currentTarget = null;
+  return returnValue;
 }
 
 /**
@@ -175,11 +201,13 @@ var EventPluginUtils = {
   isEndish: isEndish,
   isMoveish: isMoveish,
   isStartish: isStartish,
+
+  executeDirectDispatch: executeDirectDispatch,
+  executeDispatch: executeDispatch,
   executeDispatchesInOrder: executeDispatchesInOrder,
   executeDispatchesInOrderStopAtTrue: executeDispatchesInOrderStopAtTrue,
-  executeDirectDispatch: executeDirectDispatch,
   hasDispatches: hasDispatches,
-  executeDispatch: executeDispatch,
+  injection: injection,
   useTouchEvents: false
 };
 

diff --git a/src/event/synthetic/SyntheticEvent.js b/src/event/synthetic/SyntheticEvent.js
@@ -33,7 +33,8 @@ var mergeInto = require('mergeInto');
 var EventInterface = {
   type: null,
   target: getEventTarget,
-  currentTarget: null,
+  // currentTarget is set when dispatching; no use in copying it here
+  currentTarget: emptyFunction.thatReturnsNull,
   eventPhase: null,
   bubbles: null,
   cancelable: null,

diff --git a/src/eventPlugins/SimpleEventPlugin.js b/src/eventPlugins/SimpleEventPlugin.js
@@ -19,6 +19,7 @@
 "use strict";
 
 var EventConstants = require('EventConstants');
+var EventPluginUtils = require('EventPluginUtils');
 var EventPropagators = require('EventPropagators');
 var SyntheticClipboardEvent = require('SyntheticClipboardEvent');
 var SyntheticEvent = require('SyntheticEvent');
@@ -270,7 +271,7 @@ var SimpleEventPlugin = {
    * @param {string} domID DOM ID to pass to the callback.
    */
   executeDispatch: function(event, listener, domID) {
-    var returnValue = listener(event, domID);
+    var returnValue = EventPluginUtils.executeDispatch(event, listener, domID);
     if (returnValue === false) {
       event.stopPropagation();
       event.preventDefault();