angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.27k stars 6.73k forks source link

Tooltip does not disappear when 'disabled' toggled programmatically #6385

Open spc16670 opened 7 years ago

spc16670 commented 7 years ago

Bug description:

Button tooltip does not disappear when 'disabled' flag is toggled programmatically.

Link to minimally-working plunker that reproduces the issue:

Version of Angular, UIBS, and Bootstrap

Angular: angular-1.5.7 UIBS: 2.3.1 Bootstrap: 3.3.7

ghost commented 7 years ago

Plunker that reproduces the issue: http://plnkr.co/edit/ImxzzVoS29QYD46OtMQ7?p=preview Hover over the button to see the tooltip Hover out to see that the tooltip disappears

Then hover over the button again and click on it. You will see the angular-promise-buttons spinner. But when you hover out the tooltip won't disappear because the button is [disabled]

ghost commented 7 years ago

How to fix: https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js#L403

It looks like attrs.$observe('disabled') is never triggered

so replace

            attrs.$observe('disabled', function(val) {
              if (val) {
                cancelShow();
              }

              if (val && ttScope.isOpen) {
                hide();
              }
            });

with

            scope.$watch(function() {
              return element.attr('disabled');
            }, function(val){
              if (val) {
                cancelShow();
              }

              if (val && ttScope.isOpen) {
                hide();
              }
            });

I'm not 100% sure if it's a correct way but it works. I hope contributors will take a look at this.

Plunker with fixed code http://plnkr.co/edit/ImxzzVoS29QYD46OtMQ7?p=preview fix is on line 5272

wesleycho commented 7 years ago

@coolfeature can you explain how the disabled is being added/removed? I highly recommend doing so via jqlite, and not any other mechanism (i.e. raw HTMLElement.prototype.setAttribute or HTMLElement.prototype.removeAttribute).

spc16670 commented 7 years ago

Hi, I am sorry, I do not work on this code anymore. Please feel free to close if the issue in no longer there.

tmcgann commented 7 years ago

Tooltips in general don't work for me on disabled buttons.

Angular: 1.5.11 UIBS: 2.5.0 Bootstrap: 3.3.7