AngularJS binding does not update when IE's clear button is clicked

[dprothero]

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.

<input type="text" ng-model="name" />

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.

[tspaeth]

Looks like a bit related to #7297?

[Narretz]

This should never have worked, as IE11 is not sending the change event when ESC is hit / the x is clicked. What is the last version you have seen this working?

[vitaly-t]

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

[dprothero]

It works in 1.3.5. See: http://jsfiddle.net/p5x1zwr9/2/

[Narretz]

Weird.
In 1.3.5: ESC ❌ Click ✅
In 1.3.6: ESC ✅ : Click ❌

Probably caused by 55d9db5

Still, IE is not doing the right thing here.

[Tim91084]

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');
        }
    }
}

[vitaly-t]

This 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.

[Tim91084]

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]

@Tim91084 speculating on this isn't gonna help the issue, IE doesn't provide the event in question, and that's certain.

[Tim91084]

@vitaly-t it does provide the event, check it out.

http://plnkr.co/edit/meNPDdS6EibG7g2S6lJx?p=preview

[vitaly-t]

@Tim91084 the event IE fails to provide is change, because the input content changes, but no event is provided. In your example you're catching event input, which works differently.

[Tim91084]

@vitaly-t not sure how change got into the picture. The default event in recent versions of angular for a text input is input (not change). This is true except in the case of IE, where the default event is keydown. Since the event fired when the clear button is clicked is input, but angular is listening for keydown, the model value does not update. This, I believe, is the root cause of this issue.