Merge pull request #4311 from jimfb/fix-input-events

Fix event target for input change events.  Fixes #4288

Author: jimfb

src/renderers/dom/client/eventPlugins/BeforeInputEventPlugin.js

@@ -237,7 +237,8 @@ function extractCompositionEvent(
   topLevelType,
   topLevelTarget,
   topLevelTargetID,
-  nativeEvent
+  nativeEvent,
+  nativeEventTarget
 ) {
   var eventType;
   var fallbackData;
@@ -271,7 +272,8 @@ function extractCompositionEvent(
   var event = SyntheticCompositionEvent.getPooled(
     eventType,
     topLevelTargetID,
-    nativeEvent
+    nativeEvent,
+    nativeEventTarget
   );
 
   if (fallbackData) {
@@ -411,7 +413,8 @@ function extractBeforeInputEvent(
   topLevelType,
   topLevelTarget,
   topLevelTargetID,
-  nativeEvent
+  nativeEvent,
+  nativeEventTarget
 ) {
   var chars;
 
@@ -430,7 +433,8 @@ function extractBeforeInputEvent(
   var event = SyntheticInputEvent.getPooled(
     eventTypes.beforeInput,
     topLevelTargetID,
-    nativeEvent
+    nativeEvent,
+    nativeEventTarget
   );
 
   event.data = chars;
@@ -472,20 +476,23 @@ var BeforeInputEventPlugin = {
     topLevelType,
     topLevelTarget,
     topLevelTargetID,
-    nativeEvent
+    nativeEvent,
+    nativeEventTarget
   ) {
     return [
       extractCompositionEvent(
         topLevelType,
         topLevelTarget,
         topLevelTargetID,
-        nativeEvent
+        nativeEvent,
+        nativeEventTarget
       ),
       extractBeforeInputEvent(
         topLevelType,
         topLevelTarget,
         topLevelTargetID,
-        nativeEvent
+        nativeEvent,
+        nativeEventTarget
       ),
     ];
   },

src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js

@@ -74,7 +74,8 @@ function manualDispatchChangeEvent(nativeEvent) {
   var event = SyntheticEvent.getPooled(
     eventTypes.change,
     activeElementID,
-    nativeEvent
+    nativeEvent,
+    nativeEvent.target
   );
   EventPropagators.accumulateTwoPhaseDispatches(event);
 
@@ -330,7 +331,8 @@ var ChangeEventPlugin = {
       topLevelType,
       topLevelTarget,
       topLevelTargetID,
-      nativeEvent) {
+      nativeEvent,
+      nativeEventTarget) {
 
     var getTargetIDFunc, handleEventFunc;
     if (shouldUseChangeEvent(topLevelTarget)) {
@@ -360,7 +362,8 @@ var ChangeEventPlugin = {
         var event = SyntheticEvent.getPooled(
           eventTypes.change,
           targetID,
-          nativeEvent
+          nativeEvent,
+          nativeEventTarget
         );
         event.type = 'change';
         EventPropagators.accumulateTwoPhaseDispatches(event);

src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js

@@ -16,12 +16,14 @@ var emptyFunction = require('emptyFunction');
 var mocks = require('mocks');
 
 describe('ReactDOMInput', function() {
+  var EventConstants;
   var React;
   var ReactLink;
   var ReactTestUtils;
 
   beforeEach(function() {
     require('mock-modules').dumpCache();
+    EventConstants = require('EventConstants');
     React = require('React');
     ReactLink = require('ReactLink');
     ReactTestUtils = require('ReactTestUtils');
@@ -134,6 +136,30 @@ describe('ReactDOMInput', function() {
     expect(node.value).toBe('0');
   });
 
+  it('should have the correct target value', function() {
+    var handled = false;
+    var handler = function(event) {
+      expect(event.target.nodeName).toBe('INPUT');
+      handled = true;
+    };
+    var stub = <input type="text" value={0} onChange={handler} />;
+    var container = document.createElement('div');
+    var node = React.render(stub, container);
+
+    node.value = 'giraffe';
+
+    var fakeNativeEvent = new function() {};
+    fakeNativeEvent.target = node;
+    fakeNativeEvent.path = [node, container];
+    ReactTestUtils.simulateNativeEventOnNode(
+      EventConstants.topLevelTypes.topInput,
+      node,
+      fakeNativeEvent
+    );
+
+    expect(handled).toBe(true);
+  });
+
   it('should not set a value for submit buttons unnecessarily', function() {
     var stub = <input type="submit" />;
     stub = ReactTestUtils.renderIntoDocument(stub);