Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Delayed tooltip on button does not appear on first hover after re-enabling #4204

Closed
rummelsworth opened this issue Aug 13, 2015 · 6 comments
Closed

Delayed tooltip on button does not appear on first hover after re-enabling #4204

rummelsworth opened this issue Aug 13, 2015 · 6 comments
Labels
component: tooltip type: bug
Milestone
0.13.4 (Maintenance)

Comments

@rummelsworth
Copy link

I'd been watching #3611, and when it resolved I found this behavior where a delayed tooltip on a button would not appear when first mousing over the button after the button had been re-enabled after being disabled.

Here is a plunker example with repro steps in the description:

http://plnkr.co/edit/AvVRQ5h7K4VNGO70jMrF?p=preview

Here is the example template (self-contained):

<!DOCTYPE html>
<html ng-app="ExampleApp">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
  <script>
    angular.module('ExampleApp', ['ui.bootstrap']);
  </script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div ng-show="show">
    <span style="font-size: 400%">HELLO USER</span>
    <button class="btn btn-xs btn-default" ng-click="show = false">Hide</button>
  </div>
  <button class="btn btn-xs btn-default" ng-click="show = true" tooltip="Click me!" tooltip-popup-delay="1000" ng-disabled="show">Retaliatorily Salutate</button>
</body>

</html>

Here are the repro steps:

  1. Click button before tooltip shows.
  2. Click "Hide" button.
  3. Hover over first button. Tooltip never appears.
  4. Mouse out from first button, then mouse back in. Tooltip will appear.
@wesleycho
Copy link
Contributor

This appears to be reproduced if an element is disabled - this is because jqLite does not recognize mouseenter events on disabled elements in Angular, as can be seen here. Doing a bit of research into this, this appears to have been incorrect behavior in jQuery, and it was replicated likely to match the original behavior in jQuery - jQuery fixed this behavior it looks like from this ticket.

@wesleycho
Copy link
Contributor

Hm, looking into this deeper, it appears that jQuery too also does not log the event, nor does the regular browser, as can be seen here

I am inclined to say that this is not a bug unfortunately. One way around this is to take advantage of the new programmatic control of the tooltip with the tooltip-is-open attribute, but that is only currently available on master unfortunately.

@wesleycho wesleycho added this to the 0.13.4 (Performance) milestone Aug 14, 2015
@rummelsworth
Copy link
Author

@wesleycho Note that the original example reproduces the behavior when the button is enabled, not disabled.

@wesleycho
Copy link
Contributor

Just noting a verification that the event listeners behave as expected independent of tooltips here - this requires investigation into tooltip behavior.

@wesleycho wesleycho modified the milestones: 0.13.x, 0.13.4 (Performance) Aug 15, 2015
@wesleycho wesleycho modified the milestones: 0.13.4 (Performance), 0.13.x Aug 15, 2015
@wesleycho
Copy link
Contributor

I went through and debugged a little with a forked version of the Plunker here, and this actually is a garbage collection bug with the cancellation of the timeout on the observer for the disabled attribute.

The fix is very simple it turns out.

@wesleycho wesleycho mentioned this issue Aug 15, 2015
Closed
@rummelsworth
Copy link
Author

Awesome! 👍 Thanks @wesleycho

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
component: tooltip type: bug
Projects
None yet
Milestone
0.13.4 (Maintenance)
Development

Successfully merging a pull request may close this issue.

fix(tooltip): properly gc timeout on toggle of disabled wesleycho/bootstrap
2 participants
@wesleycho @rummelsworth