Angular and Internet Explorer 11 - Inputs Not Working Correctly

Question

I'm having severe issues with inputs using ng-model in IE (11 and all previous versions,) but everything is working correctly in all other browsers. This issue was first observed last week. We have made no updates to this section of our application and heard no reports of users having this issue prior to last week.

We are running Angular 1.4.3.

Basically, inputs like this one:

<input data-ng-model="answer.value"></input>

Are not correctly updating the model. It looks like an issue with onChange or onFocus events - the inputs never lose their ng-pristine and ng-untouched classes. They are properly displaying the initial value from the model but any updates made by the user simply fail to save. We've experimented with adding a <meta http-equiv="X-UA-Compatible" content="IE=11" /> tag to our head to no avail. Removing all validations from the inputs makes no difference. There are no console errors or alerts.

Answer 1

In my case, I had a parent component, and a child input.

The parent component had a poor choice of Angular binding attribute; I called the attribute "disabled". disabled was a bad choice of custom attribute name because that is a standard attribute for many HTML elements.

When I changed the custom attribute name to "custom-disabled", the child inputs started responding.

Internet Explorer interpreted some ancestor disabled attribute to mean all descendants should be disabled; therefore my angular input ng-model, ng-change, ng-blur, ng-focus were not working.

I should've known: when I asked $('input').is(':disabled'), the result was true. I ignored this because the input element itself didn't have the disabled attribute; only an ancestor element did!