Repository navigation
AngularJS binding does not update when IE's clear button is clicked #11193
Description
Activity
This should never have worked, as IE11 is not sending the
changeevent when ESC is hit / thexis clicked. What is the last version you have seen this working?I researched it, and it would appear that the only usable solution is to remove the "X" using CSS, which is quite easy. Example: http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs
Reacted by Michael PrenticeIt works in 1.3.5. See: http://jsfiddle.net/p5x1zwr9/2/
I'm using this directive to resolve the issue.. Albeit I only tested in a later version of angular (1.4.5)
angular .module('yourModule') .directive('input', FixIEClearButton); FixIEClearButton.$inject = ['$timeout', '$sniffer']; function FixIEClearButton($timeout, $sniffer) { var directive = { restrict: 'E', require: '?ngModel', link: Link, controller: function () { } }; return directive; function Link(scope, elem, attr, controller) { var type = elem[0].type; //ie11 doesn't seem to support the input event, at least according to angular if (type !== 'text' || !controller || $sniffer.hasEvent('input')) { return; } elem.on("mouseup", function (event) { var oldValue = elem.val(); if (oldValue == "") { return; } $timeout(function () { var newValue = elem.val(); if (newValue !== oldValue) { elem.val(oldValue); elem.triggerHandler('keydown'); elem.val(newValue); elem.triggerHandler('focus'); } }, 0, false); }); scope.$on('$destroy', destroy); elem.on('$destroy', destroy); function destroy() { elem.off('mouseup'); } } }Reacted by Chen XI, vincentfultimatesoftware, Arno Schutijzer and KseniiaThis couldn't have worked, because IE does provide the necessary event. The only way to make it work is via a hack/workaround: either hide it with CSS or taping into mouse events to sneak-pick the current text in the control, like in the example shown just before.
I do believe AngularJS never had any hacks for this, so it couldn't have worked.
I think IE does provide the event, but for some reason (55d9db5) angular doesn't use it. Since angular isn't using the input event, the clear button event (which is the input event) is not captured. I wonder if you may also be able to solve this by using ng-model-options -> updateOn, and setting that to 'input'... gonna give it a try now..
@vitaly-t it does provide the event, check it out.
@vitaly-t not sure how
changegot into the picture. The default event in recent versions of angular for a text input isinput(notchange). This is true except in the case of IE, where the default event iskeydown. Since the event fired when the clear button is clicked isinput, but angular is listening forkeydown, the model value does not update. This, I believe, is the root cause of this issue.6 remaining items
This was introduced at 1.3.6 version. You can check this predicate change.
If you change back toif (event == 'input' && msie == 9) return false;
Clear button would update model state immediately.
Comment states next:
// IE10+ implements 'input' event but it erroneously fires under various situations,
// e.g. when placeholder changes, or a form is focused.Reacted by Michael Prentice- added a commit that references this issue
on Feb 1, 2016 The following is still an issue, even in the latest version of AngularJS, and it was created by v1.3.6. As mentioned above.
It is my opinion that this issue be escalated as it could lead to data loss for IE users.
NOTE: the following defect can only be duplicated in IE (I'm using IE11)
Below are two runs of the same test using different Angular versions. One using 1.3.5 and the other is using 1.3.6.
Details:
Browser: IE11
AngularJS: v1.3.5JSBin Sample:
http://jsbin.com/zeqanudeqi/1/edit?html,js,outputSteps to reproduce:
Edit any cell in "ID" column (do not press enter or any table navigation key)
After edit immediately click on "filter" textbox
Type text into "filter" textboxEXPECTED RESULT: {{ctrl.filter}} should correspond to item in "filter" textbox
PASS
Details:
Browser: IE11
AngularJS: v1.3.6JSBin Sample:
http://jsbin.com/ceduyapiwe/1/edit?html,js,outputSteps to reproduce:
Edit any cell in "ID" column (do not press enter or any table navigation key)
After edit immediately click on "filter" textbox
Type text into "filter" textboxEXPECTED RESULT: {{ctrl.filter}} should correspond to item in "filter" textbox
DEFECT: model is not updatedIt should be noted that this is fixed in Edge. I'm not sure this can be fixed for IE though without introducing other bugs that have broader impact. IMO this should probably be closed due to the browser itself being broken, and workarounds being inadequate in the library itself.
Interesting response. In my opinion this was working fine in 1.3.5 and 1.3.6 created a new defect, regardless of how many defects you think it solved it introduced another.
It really makes me question the AngularJS framework. I'm not sure what the other bugs are you speak of but I call in to question if their severity is greater than that of an issue that leads to data loss for a browser that dominates enterprise use.
Unexpected running of parsers & validators could be far more severe than an edge case from incorrect browser eventing.
If there is a suitable workaround through event object sniffing to differentiate when the input events are fired on IE10 & 11, it would be worth doing so, but if the browser flat out does the wrong thing, it can be impossible to hack around it.
If there is a reasonable fix for this (e.g. listening to one more event on IEs), I think it is worth fixing this.
It is obviously a browser issue, but I agree that it can have severe impact on functionality and we should try to work around the browser's problematic behavior.
(It's not like this will be the first time we are working around IE's "eccentric" behavior 😃)PR anyone ? 😛
Reacted by Michael PrenticeJust did a search, and found a potentially promising avenue, but it might degrade performance of the handler slightly - http://stackoverflow.com/a/25693273 suggests that we could cache the old value, and on change, pull the new value and compare. If they are the same and we are in IE, we could just exit the handler, which should be sufficient to avoid the excess $parser/$validator firing problem.
Actually, I have an idea how to implement this - I'll open a PR shortly. Will we be able to write a test for this though?
Any updates on this problem? thanks
See #14772 (comment).
Reacted by Michael PrenticeI just wanted to note that this affects AngularJS Material as well (angular/material#10872). My recommendation is to hide the
-ms-clearbuttons. Then if you still need a clear button, you can add your own icon button that will work across browsers.
IE has an "X" in each text input that will clear the input. However, when clicking this button, while it clears the textbox, it does not update the Angular model that the input is bound to.
See http://jsfiddle.net/p5x1zwr9/ for an example of the behavior.
See http://youtu.be/LFaEwliTzpQ for a video of the behavior.
I am using IE 11.
This actually worked in AngularJS versions prior to 1.3.6 so this may be a new Angular bug.