From 3923cd71a6e830da02f83372089b2652e5bd5900 Mon Sep 17 00:00:00 2001 From: Giuseppe Scoppino Date: Wed, 14 Mar 2018 12:06:59 -0400 Subject: [PATCH 1/5] docs(guide/Internet Explorer Compatibility): Mention 'disabled' attribute Setting the 'disabled' attribute on an element that has descendant elements has unexpected behavior in Internet Explorer 11. * Input elements that are descendants have the text content of the 'placeholder' attribute inserted as the value (and it is not removed when typing in the field). * Select elements that are descendants are disabled. To avoid this issue, it is important to not set `disabled` or `ng-disabled` on an element that has descendant form elements. Normally these should only be used on actual form controls so the issue would not manifest. The issue can also appear if a directive/component is named 'disabled' or takes an attribute named 'disabled' as an input/output attribute, so avoid these. --- docs/content/guide/ie.ngdoc | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index ffd70ba69b4c..3aa03392645d 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -39,3 +39,8 @@ To ensure your AngularJS application works on IE please consider: of `placeholder="{{ someExpression }}"`. If using the latter, Internet Explorer will error on accessing the `nodeValue` on a parentless `TextNode` in Internet Explorer 10 & 11 (see [issue 5025](https://github.com/angular/angular.js/issues/5025)). +5. For the `disabled` attribute, when used on an element that has input elements as descendants, + Internet Explorer 11 will insert the text of the `placeholder` attribute (when specified) into the + element value. It will also make disable the descendant form controls that are `select` elements. This should be + kept in mind when using `disabled`, `ng-disabled` (which conditionally sets `disabled`), + or any directives/components that is named `disabled` or takes an attribute named `disabled` as an input/output attribute. From 285737dadc88666fdee3be2aa3d3d2959711d7db Mon Sep 17 00:00:00 2001 From: Giuseppe Scoppino Date: Wed, 14 Mar 2018 12:34:38 -0400 Subject: [PATCH 2/5] Mention issue with model value not updating --- docs/content/guide/ie.ngdoc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index 3aa03392645d..fa09d7a9b41c 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -41,6 +41,7 @@ To ensure your AngularJS application works on IE please consider: (see [issue 5025](https://github.com/angular/angular.js/issues/5025)). 5. For the `disabled` attribute, when used on an element that has input elements as descendants, Internet Explorer 11 will insert the text of the `placeholder` attribute (when specified) into the - element value. It will also make disable the descendant form controls that are `select` elements. This should be + element value. Changes to the field value also will no longer be reflected in the model. + It will also make disable the descendant form controls that are `select` elements. This should be kept in mind when using `disabled`, `ng-disabled` (which conditionally sets `disabled`), or any directives/components that is named `disabled` or takes an attribute named `disabled` as an input/output attribute. From 095987475035c72c42273dd9d0b2d549fb1e304c Mon Sep 17 00:00:00 2001 From: Giuseppe Scoppino Date: Sun, 18 Mar 2018 18:44:25 -0400 Subject: [PATCH 3/5] Modify description of new IE11 compatibility note. * Rewrote description to emphasize the bug in the context of custom directives. * Mention workaround of not using the name `disabled` for custom directive attributes or attributes passed to a custom directive. --- docs/content/guide/ie.ngdoc | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index fa09d7a9b41c..024e7eb3c00e 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -39,9 +39,12 @@ To ensure your AngularJS application works on IE please consider: of `placeholder="{{ someExpression }}"`. If using the latter, Internet Explorer will error on accessing the `nodeValue` on a parentless `TextNode` in Internet Explorer 10 & 11 (see [issue 5025](https://github.com/angular/angular.js/issues/5025)). -5. For the `disabled` attribute, when used on an element that has input elements as descendants, - Internet Explorer 11 will insert the text of the `placeholder` attribute (when specified) into the - element value. Changes to the field value also will no longer be reflected in the model. - It will also make disable the descendant form controls that are `select` elements. This should be - kept in mind when using `disabled`, `ng-disabled` (which conditionally sets `disabled`), - or any directives/components that is named `disabled` or takes an attribute named `disabled` as an input/output attribute. +5. Using `disabled` as the identifier of a custom attribute on an element that has + descedant form controls can result in unexpected behavior in Internet Explorer 11. + Examples include the value of descendant input elements with `ng-model` not being reflective + of the model (or changes to the model), and the value of the `placeholder` attribute being + inserted as the input's value. Descendant select elements will also be inoperable, as if they + had the `disabled` attribute applied to them, which may not be the intended effect. To work + around this unexpected behavior, 1) avoid using the identifier `disabled` for custom attribute + directives that are on elements with descendant form controls, and 2) avoid using `disabled` as an identifier + for an attribute passed to a custom directive that has descendant form controls. From 7925740097ddc7e22eef0dd009c85c7a8fd7ab58 Mon Sep 17 00:00:00 2001 From: Giuseppe Scoppino Date: Sun, 18 Mar 2018 18:45:08 -0400 Subject: [PATCH 4/5] Fix typo in new IE11 compatibility note. --- docs/content/guide/ie.ngdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index 024e7eb3c00e..32b9769b00af 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -40,7 +40,7 @@ To ensure your AngularJS application works on IE please consider: on accessing the `nodeValue` on a parentless `TextNode` in Internet Explorer 10 & 11 (see [issue 5025](https://github.com/angular/angular.js/issues/5025)). 5. Using `disabled` as the identifier of a custom attribute on an element that has - descedant form controls can result in unexpected behavior in Internet Explorer 11. + descendant form controls can result in unexpected behavior in Internet Explorer 11. Examples include the value of descendant input elements with `ng-model` not being reflective of the model (or changes to the model), and the value of the `placeholder` attribute being inserted as the input's value. Descendant select elements will also be inoperable, as if they From 414421c9cb79e61608616fc2ad8c6aacfe031752 Mon Sep 17 00:00:00 2001 From: Martin Staffa Date: Mon, 19 Mar 2018 10:30:36 +0100 Subject: [PATCH 5/5] Small tweaks on the wording --- docs/content/guide/ie.ngdoc | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/content/guide/ie.ngdoc b/docs/content/guide/ie.ngdoc index 32b9769b00af..7afb1c5fefee 100644 --- a/docs/content/guide/ie.ngdoc +++ b/docs/content/guide/ie.ngdoc @@ -39,12 +39,12 @@ To ensure your AngularJS application works on IE please consider: of `placeholder="{{ someExpression }}"`. If using the latter, Internet Explorer will error on accessing the `nodeValue` on a parentless `TextNode` in Internet Explorer 10 & 11 (see [issue 5025](https://github.com/angular/angular.js/issues/5025)). -5. Using `disabled` as the identifier of a custom attribute on an element that has +5. Using the `disabled` attribute on an element that has descendant form controls can result in unexpected behavior in Internet Explorer 11. - Examples include the value of descendant input elements with `ng-model` not being reflective - of the model (or changes to the model), and the value of the `placeholder` attribute being + For example, the value of descendant input elements with `ng-model` will not reflect + the model (or changes to the model), and the value of the `placeholder` attribute will be inserted as the input's value. Descendant select elements will also be inoperable, as if they - had the `disabled` attribute applied to them, which may not be the intended effect. To work - around this unexpected behavior, 1) avoid using the identifier `disabled` for custom attribute + had the `disabled` attribute applied to them, which may not be the intended effect. + To work around this unexpected behavior, 1) avoid using the identifier `disabled` for custom attribute directives that are on elements with descendant form controls, and 2) avoid using `disabled` as an identifier for an attribute passed to a custom directive that has descendant form controls.