Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ng-disabled doesn't remove "disabled" attribute when jquery is loaded #16778

Closed
1 of 3 tasks
ghost opened this issue Nov 30, 2018 · 9 comments · Fixed by #16779
Closed
1 of 3 tasks

ng-disabled doesn't remove "disabled" attribute when jquery is loaded #16778

ghost opened this issue Nov 30, 2018 · 9 comments · Fixed by #16779

Comments

@ghost
Copy link

ghost commented Nov 30, 2018

I'm submitting a ...

  • bug report
  • feature request
  • other

Current behavior:
ng-disable creates disabled="false"/ng-disabled="true" attributes for elements when jquery was loaded before angularjs.

Expected / new behavior:
disabled attribute is removed when ng-disabled evaluates to false

Minimal reproduction of the problem with instructions:
http://next.plnkr.co/edit/1GxYGSKho4H0nDAD
(tested in chromium)

AngularJS version: 1.7.5 (or whatever your server currently ships)

Browser: all? (tested in chrome 70.0.3538.110 | Firefox 60.3.0esr)

@gkalpak
Copy link
Member

gkalpak commented Nov 30, 2018

This is a jQuery issue. You should use jQuery 3.x with AngularJS 1.7.x anyway, and this is fixed with the latest jQuery.
Closing since this is not an AngularJS issue.

@gkalpak gkalpak closed this as completed Nov 30, 2018
@ghost
Copy link
Author

ghost commented Nov 30, 2018

Bullshit. It is not fixed with the latest jquery. Please check what is included in my example - the latest version of both:

                    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                    <script type="text/javascript" src="https://docs.angularjs.org/angular.min.js"></script>

@ghost
Copy link
Author

ghost commented Nov 30, 2018

Also tried with jqueries latest git version and it is the exact same problem

@ghost
Copy link
Author

ghost commented Nov 30, 2018

And it only seems to be a problem for XHTML and not HTML

@gkalpak
Copy link
Member

gkalpak commented Nov 30, 2018

Oh interesting. The demo (which was using 2.x when I checked) didn't work for me, so I created my own demo to check and I missed the XHTML requirement. Indeed, it doesn't work as expected on XHTML. This is because jQuery detects it as an XML document and handles it differently (i.e. just sets the attribute value to true/false, even for boolean attributes).

@mgol or @jbedard might know more about this jQuery behavior.

In any case, I'm afraid there is not much we can do. It either looks like a jQuery issues/limitiation or (if it boils down to AngularJS incorrectly using the jQuery APIs on XHTML documents) it is a limitation in AngularJS we will not be addressed at this point, as we are already months deep into LTS mode.

@jbedard
Copy link
Contributor

jbedard commented Nov 30, 2018

I was probably debugging this the same time as you :p

I came to the same conclusion. I don't know the history behind this though. I thought the XHTML vs html(5 only?) difference was disabled="disabled" (XHTML) vs just disabled with no value (html5), but the XHTML one would also work in html5 so may as well always use it. But maybe that's wrong? I think that's what jqLite does, but jQuery seems to do something different...

@mgol
Copy link
Member

mgol commented Dec 1, 2018

See my analysis at jquery/jquery#4249 (comment). tl;dr is jQuery skips special boolean attrs treatment in XML nodes for historical reasons. I think AngularJS could call removeAttr(attrName) instead of .attr(attrName, false) for boolean attrs to avoid the issue.

mgol added a commit to mgol/angular.js that referenced this issue Dec 1, 2018
…h jQuery

jQuery skips special boolean attrs treatment in XML nodes for historical reasons
and hence AngularJS cannot freely call `.attr(attrName, false) with such
attributes. To avoid issues in XHTML, call `removeAttr` in such cases instead.

Ref jquery/jquery#4249
Fixes angular#16778
@mgol
Copy link
Member

mgol commented Dec 1, 2018

Since we're planning a release soon this may make it as well, let's reopen.

@mgol
Copy link
Member

mgol commented Dec 1, 2018

PR: #16779

mgol added a commit to mgol/angular.js that referenced this issue Dec 3, 2018
…h jQuery

jQuery skips special boolean attrs treatment in XML nodes for historical reasons
and hence AngularJS cannot freely call `.attr(attrName, false) with such
attributes. To avoid issues in XHTML, call `removeAttr` in such cases instead.

Ref jquery/jquery#4249
Fixes angular#16778
mgol added a commit to mgol/angular.js that referenced this issue Dec 3, 2018
jQuery skips special boolean attrs treatment in XML nodes for historical reasons
and hence AngularJS cannot freely call `.attr(attrName, false) with such
attributes. To avoid issues in XHTML, call `removeAttr` in such cases instead.

Ref jquery/jquery#4249
Fixes angular#16778
mgol added a commit to mgol/angular.js that referenced this issue Dec 3, 2018
jQuery skips special boolean attrs treatment in XML nodes for historical reasons
and hence AngularJS cannot freely call `.attr(attrName, false) with such
attributes. To avoid issues in XHTML, call `removeAttr` in such cases instead.

Ref jquery/jquery#4249
Fixes angular#16778
mgol added a commit that referenced this issue Dec 6, 2018
jQuery skips special boolean attrs treatment in XML nodes for historical reasons
and hence AngularJS cannot freely call `.attr(attrName, false) with such
attributes. To avoid issues in XHTML, call `removeAttr` in such cases instead.

Ref jquery/jquery#4249
Fixes #16778
Closes #16779
mgol added a commit that referenced this issue Dec 6, 2018
jQuery skips special boolean attrs treatment in XML nodes for historical reasons
and hence AngularJS cannot freely call `.attr(attrName, false) with such
attributes. To avoid issues in XHTML, call `removeAttr` in such cases instead.

Ref jquery/jquery#4249
Fixes #16778
Closes #16779
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants