opt out of input events for ie 10 and 11
while supported then Input event is too noisy in IE. Firing on placeholder sets, and when an input is focused with a placeholder. fixes #3377 and fixes #3484
jquense committed
Jun 7, 2015 at 14:35 UTC
b5e7a8447caef042b8c52a064f45b925b4ff613c
1 file changed
+20
-10
src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js
+20
-10
@@ -140,14 +140,16 @@ function handleEventsForChangeEventIE8(
140
var isInputEventSupported = false;
141
if (ExecutionEnvironment.canUseDOM) {
142
// IE9 claims to support the input event but fails to trigger it when
143
- // deleting text, so we ignore its input events
143
+ // deleting text, so we ignore its input events.
144
+ // IE10+ fire input events to often, such when a placeholder
145
+ // changes or when an input with a placeholder is focused.
146
isInputEventSupported = isEventSupported('input') && (
145
- !('documentMode' in document) || document.documentMode > 9
147
+ !('documentMode' in document) || document.documentMode > 11
148
);
149
}
150
151
/**
150
- * (For old IE.) Replacement getter/setter for the `value` property that gets
152
+ * (For IE <=11) Replacement getter/setter for the `value` property that gets
153
* set on the active element.
154
*/
155
var newValueProp = {
@@ -162,7 +164,7 @@ var newValueProp = {
164
};
165
166
/**
165
- * (For old IE.) Starts tracking propertychange events on the passed-in element
167
+ * (For IE <=11) Starts tracking propertychange events on the passed-in element
168
* and override the value property so that we can distinguish user events from
169
* value changes in JS.
170
*/
@@ -176,11 +178,15 @@ function startWatchingForValueChange(target, targetID) {
178
);
179
180
Object.defineProperty(activeElement, 'value', newValueProp);
179
- activeElement.attachEvent('onpropertychange', handlePropertyChange);
181
+ if (activeElement.attachEvent) {
182
+ activeElement.attachEvent('onpropertychange', handlePropertyChange);
183
+ } else {
184
+ activeElement.addEventListener('propertychange', handlePropertyChange, false);
185
+ }
186
}
187
188
/**
183
- * (For old IE.) Removes the event listeners from the currently-tracked element,
189
+ * (For IE <=11) Removes the event listeners from the currently-tracked element,
190
* if any exists.
191
*/
192
function stopWatchingForValueChange() {
@@ -190,7 +196,12 @@ function stopWatchingForValueChange() {
196
197
// delete restores the original property definition
198
delete activeElement.value;
193
- activeElement.detachEvent('onpropertychange', handlePropertyChange);
199
+
200
+ if (activeElement.detachEvent) {
201
+ activeElement.detachEvent('onpropertychange', handlePropertyChange);
202
+ } else {
203
+ activeElement.removeEventListener('propertychange', handlePropertyChange, false);
204
+ }
205
206
activeElement = null;
207
activeElementID = null;
@@ -199,7 +210,7 @@ function stopWatchingForValueChange() {
210
}
211
212
/**
202
- * (For old IE.) Handles a propertychange event, sending a `change` event if
213
+ * (For IE <=11) Handles a propertychange event, sending a `change` event if
214
* the value of the active element has changed.
215
*/
216
function handlePropertyChange(nativeEvent) {
@@ -229,7 +240,6 @@ function getTargetIDForInputEvent(
240
}
241
}
242
232
-// For IE8 and IE9.
243
function handleEventsForInputEventIE(
244
topLevelType,
245
topLevelTarget,
@@ -238,7 +248,7 @@ function handleEventsForInputEventIE(
248
// In IE8, we can capture almost all .value changes by adding a
249
// propertychange handler and looking for events with propertyName
250
// equal to 'value'
241
- // In IE9, propertychange fires for most input events but is buggy and
251
+ // In IE9-11, propertychange fires for most input events but is buggy and
252
// doesn't fire when text is deleted, but conveniently, selectionchange
253
// appears to fire in all of the remaining cases so we catch those and
254
// forward the event if the value has changed