Fix event target for input change events. Fixes #4288
Jim committed
Jul 7, 2015 at 17:12 UTC
4b804e485db51b49716736ce2dfcf23d020b6eb2
3 files changed
+46
-10
src/renderers/dom/client/eventPlugins/BeforeInputEventPlugin.js
+14
-7
@@ -237,7 +237,8 @@ function extractCompositionEvent(
237
topLevelType,
238
topLevelTarget,
239
topLevelTargetID,
240
- nativeEvent
240
+ nativeEvent,
241
+ nativeEventTarget
242
) {
243
var eventType;
244
var fallbackData;
@@ -271,7 +272,8 @@ function extractCompositionEvent(
272
var event = SyntheticCompositionEvent.getPooled(
273
eventType,
274
topLevelTargetID,
274
- nativeEvent
275
+ nativeEvent,
276
+ nativeEventTarget
277
);
278
279
if (fallbackData) {
@@ -411,7 +413,8 @@ function extractBeforeInputEvent(
413
topLevelType,
414
topLevelTarget,
415
topLevelTargetID,
414
- nativeEvent
416
+ nativeEvent,
417
+ nativeEventTarget
418
) {
419
var chars;
420
@@ -430,7 +433,8 @@ function extractBeforeInputEvent(
433
var event = SyntheticInputEvent.getPooled(
434
eventTypes.beforeInput,
435
topLevelTargetID,
433
- nativeEvent
436
+ nativeEvent,
437
+ nativeEventTarget
438
);
439
440
event.data = chars;
@@ -472,20 +476,23 @@ var BeforeInputEventPlugin = {
476
topLevelType,
477
topLevelTarget,
478
topLevelTargetID,
475
- nativeEvent
479
+ nativeEvent,
480
+ nativeEventTarget
481
) {
482
return [
483
extractCompositionEvent(
484
topLevelType,
485
topLevelTarget,
486
topLevelTargetID,
482
- nativeEvent
487
+ nativeEvent,
488
+ nativeEventTarget
489
),
490
extractBeforeInputEvent(
491
topLevelType,
492
topLevelTarget,
493
topLevelTargetID,
488
- nativeEvent
494
+ nativeEvent,
495
+ nativeEventTarget
496
),
497
];
498
},
src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js
+6
-3
@@ -74,7 +74,8 @@ function manualDispatchChangeEvent(nativeEvent) {
74
var event = SyntheticEvent.getPooled(
75
eventTypes.change,
76
activeElementID,
77
- nativeEvent
77
+ nativeEvent,
78
+ nativeEvent.target
79
);
80
EventPropagators.accumulateTwoPhaseDispatches(event);
81
@@ -330,7 +331,8 @@ var ChangeEventPlugin = {
331
topLevelType,
332
topLevelTarget,
333
topLevelTargetID,
333
- nativeEvent) {
334
+ nativeEvent,
335
+ nativeEventTarget) {
336
337
var getTargetIDFunc, handleEventFunc;
338
if (shouldUseChangeEvent(topLevelTarget)) {
@@ -360,7 +362,8 @@ var ChangeEventPlugin = {
362
var event = SyntheticEvent.getPooled(
363
eventTypes.change,
364
targetID,
363
- nativeEvent
365
+ nativeEvent,
366
+ nativeEventTarget
367
);
368
event.type = 'change';
369
EventPropagators.accumulateTwoPhaseDispatches(event);
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+26
@@ -16,12 +16,14 @@ var emptyFunction = require('emptyFunction');
16
var mocks = require('mocks');
17
18
describe('ReactDOMInput', function() {
19
+ var EventConstants;
20
var React;
21
var ReactLink;
22
var ReactTestUtils;
23
24
beforeEach(function() {
25
require('mock-modules').dumpCache();
26
+ EventConstants = require('EventConstants');
27
React = require('React');
28
ReactLink = require('ReactLink');
29
ReactTestUtils = require('ReactTestUtils');
@@ -134,6 +136,30 @@ describe('ReactDOMInput', function() {
136
expect(node.value).toBe('0');
137
});
138
139
+ it('should have the correct target value', function() {
140
+ var handled = false;
141
+ var handler = function(event) {
142
+ expect(event.target.nodeName).toBe('INPUT');
143
+ handled = true;
144
+ };
145
+ var stub = <input type="text" value={0} onChange={handler} />;
146
+ var container = document.createElement('div');
147
+ var node = React.render(stub, container);
148
+
149
+ node.value = 'giraffe';
150
+
151
+ var fakeNativeEvent = new function() {};
152
+ fakeNativeEvent.target = node;
153
+ fakeNativeEvent.path = [node, container];
154
+ ReactTestUtils.simulateNativeEventOnNode(
155
+ EventConstants.topLevelTypes.topInput,
156
+ node,
157
+ fakeNativeEvent
158
+ );
159
+
160
+ expect(handled).toBe(true);
161
+ });
162
+
163
it('should not set a value for submit buttons unnecessarily', function() {
164
var stub = <input type="submit" />;
165
stub = ReactTestUtils.renderIntoDocument(stub);