input: length property and model not updated after using IE "clear field" button

[QuentinLuc]

Actual Behavior:

• Using IE, WHEN an input has 'md-maxlength="x"' attribute AND the user clicks on the "Clear field" button ", THEN the field is cleared but the length property is not updated.
• The length property should be updated to display '0/x' in this case because the field is empty.

Screen:

This issue can be reproduced on the Angular Material website: https://material.angularjs.org/latest/demo/input

AngularJS Versions: *

• AngularJS Material Version: 1.1.4

[mckenzielong]

FWIW I also see this happening on a regular input too: https://plnkr.co/edit/s8B7cuhlUOtK8UBFudpz?p=preview

[Splaktar]

This is a bug in AngularJS: angular/angular.js#11193

There is a PR for it (angular/angular.js#14772) but it has been abandoned and no one has continued with the work yet.

This StackOverflow question has a lot of possible workarounds.

If you are following Material Design, then I would suggest taking the following approach to hide the -ms-clear buttons. Then you can add a clear icon button that aligns with the Material Design Spec and works across all browsers.