Make controlled components and bubbling work in IE
Fixes #708. Test Plan: In IE9, tested a controlled text input with the event handler on a containing element, as in the fiddle linked in the original issue. Also tested a controlled radio button as the logic there differs within ReactDOMInput. In both cases, I was able to interact with the controls.
Ben Alpert committed
Dec 26, 2013 at 23:05 UTC
556065937b91a08635799934bee12259cdb439bd
1 file changed
+15
-3
src/eventPlugins/ChangeEventPlugin.js
+15
-3
@@ -22,6 +22,7 @@ var EventConstants = require('EventConstants');
22
var EventPluginHub = require('EventPluginHub');
23
var EventPropagators = require('EventPropagators');
24
var ExecutionEnvironment = require('ExecutionEnvironment');
25
+var ReactUpdates = require('ReactUpdates');
26
var SyntheticEvent = require('SyntheticEvent');
27
28
var isEventSupported = require('isEventSupported');
@@ -73,10 +74,21 @@ function manualDispatchChangeEvent(nativeEvent) {
74
);
75
EventPropagators.accumulateTwoPhaseDispatches(event);
76
76
- // If change bubbled, we'd just bind to it like all the other events
77
- // and have it go through ReactEventTopLevelCallback. Since it doesn't, we
78
- // manually listen for the change event and so we have to enqueue and
77
+ // If change and propertychange bubbled, we'd just bind to it like all the
78
+ // other events and have it go through ReactEventTopLevelCallback. Since it
79
+ // doesn't, we manually listen for the events and so we have to enqueue and
80
// process the abstract event manually.
81
+ //
82
+ // Batching is necessary here in order to ensure that all event handlers run
83
+ // before the next rerender (including event handlers attached to ancestor
84
+ // elements instead of directly on the input). Without this, controlled
85
+ // components don't work properly in conjunction with event bubbling because
86
+ // the component is rerendered and the value reverted before all the event
87
+ // handlers can run. See https://github.com/facebook/react/issues/708.
88
+ ReactUpdates.batchedUpdates(runEventInBatch, event);
89
+}
90
+
91
+function runEventInBatch(event) {
92
EventPluginHub.enqueueEvents(event);
93
EventPluginHub.processEventQueue();
94
}