From b5e7a8447caef042b8c52a064f45b925b4ff613c Mon Sep 17 00:00:00 2001 From: jquense Date: Sun, 7 Jun 2015 14:35:27 -0400 Subject: [PATCH] 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 --- .../client/eventPlugins/ChangeEventPlugin.js | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js b/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js index de8bfadce3fe1..7152af31e7ac6 100644 --- a/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js +++ b/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js @@ -140,14 +140,16 @@ function handleEventsForChangeEventIE8( var isInputEventSupported = false; if (ExecutionEnvironment.canUseDOM) { // IE9 claims to support the input event but fails to trigger it when - // deleting text, so we ignore its input events + // deleting text, so we ignore its input events. + // IE10+ fire input events to often, such when a placeholder + // changes or when an input with a placeholder is focused. isInputEventSupported = isEventSupported('input') && ( - !('documentMode' in document) || document.documentMode > 9 + !('documentMode' in document) || document.documentMode > 11 ); } /** - * (For old IE.) Replacement getter/setter for the `value` property that gets + * (For IE <=11) Replacement getter/setter for the `value` property that gets * set on the active element. */ var newValueProp = { @@ -162,7 +164,7 @@ var newValueProp = { }; /** - * (For old IE.) Starts tracking propertychange events on the passed-in element + * (For IE <=11) Starts tracking propertychange events on the passed-in element * and override the value property so that we can distinguish user events from * value changes in JS. */ @@ -176,11 +178,15 @@ function startWatchingForValueChange(target, targetID) { ); Object.defineProperty(activeElement, 'value', newValueProp); - activeElement.attachEvent('onpropertychange', handlePropertyChange); + if (activeElement.attachEvent) { + activeElement.attachEvent('onpropertychange', handlePropertyChange); + } else { + activeElement.addEventListener('propertychange', handlePropertyChange, false); + } } /** - * (For old IE.) Removes the event listeners from the currently-tracked element, + * (For IE <=11) Removes the event listeners from the currently-tracked element, * if any exists. */ function stopWatchingForValueChange() { @@ -190,7 +196,12 @@ function stopWatchingForValueChange() { // delete restores the original property definition delete activeElement.value; - activeElement.detachEvent('onpropertychange', handlePropertyChange); + + if (activeElement.detachEvent) { + activeElement.detachEvent('onpropertychange', handlePropertyChange); + } else { + activeElement.removeEventListener('propertychange', handlePropertyChange, false); + } activeElement = null; activeElementID = null; @@ -199,7 +210,7 @@ function stopWatchingForValueChange() { } /** - * (For old IE.) Handles a propertychange event, sending a `change` event if + * (For IE <=11) Handles a propertychange event, sending a `change` event if * the value of the active element has changed. */ function handlePropertyChange(nativeEvent) { @@ -229,7 +240,6 @@ function getTargetIDForInputEvent( } } -// For IE8 and IE9. function handleEventsForInputEventIE( topLevelType, topLevelTarget, @@ -238,7 +248,7 @@ function handleEventsForInputEventIE( // In IE8, we can capture almost all .value changes by adding a // propertychange handler and looking for events with propertyName // equal to 'value' - // In IE9, propertychange fires for most input events but is buggy and + // In IE9-11, propertychange fires for most input events but is buggy and // doesn't fire when text is deleted, but conveniently, selectionchange // appears to fire in all of the remaining cases so we catch those and // forward the event if the value has changed