TypeError: Cannot read property 'offsetHeight' of null

[rarkins]

Bug description:

I am seeing regular occurrences of this exception in browsers. The sourcemapped stack trace appears to point to code inside the distributed angular-ui bootstrap module:

TypeError: Cannot read property 'offsetHeight' of null
1
File "node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" line 4886 col 59 in [anonymous]
var currentHeight = angular.isDefined(tooltip.offsetHeight) ? tooltip.offsetH...
2
File "node_modules/angular/angular.js" line 19612 col 31 in [anonymous]
deferred.resolve(fn.apply(null, args));
3
File "node_modules/angular/angular.js" line 5964 col 10 in o
fn.apply(null, sliceArgs(arguments, 1));
4
File "node_modules/angular/angular.js" line 6243 col 7 in [anonymous]
completeOutstandingRequest(fn);

It would appear that tooltip in the above is null, which corresponds to:

bootstrap/src/tooltip/tooltip.js

Line 164 in f5ff12c

var initialHeight = angular.isDefined(tooltip.offsetHeight) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');

Of course, checking for angular being non null is the easy solution but that may be a bandaid to the real problem rather than the cure.

Link to minimally-working plunker that reproduces the issue:

Sorry, I am yet to figure out exactly what causes this, other than a suspicion that it's rapidly hovering tooltips.

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8

UIBS: 2.1.3

Bootstrap: 3.3.7

[karensg]

Same problem here

[Johnnyrook777]

I was able to replicate it using a menu that overlaps a button with a tool-tip, when you click the menu and change navigation (i.e. the button with tool-tip is no longer there), you get the error. Seems the button is briefly available and triggers the tool-tip show as the menu disappears, but then the item is removed, and the timeout isn't cancelled

[tkenakka]

Same problem here. Reproducing randomly, but usually related to a tooltip in a button which a) changes the width of a div i.e. visible area b) triggers a state transition into a new state.

[Rouche]

Same error here. Random.
Happen when i have a popover opened, then i resize to small so the UI goes in mobile mode. The popover is in an ng-if="ctrl.desktop", so i guess the $timeout gets executed on something no longer in DOM.

[ngson]

Any updates on this issue? I have same error too, randomly after clicking to open the popover. The popover seems opened fine, but the error is shown.

[Rouche]

Here is a Plunk:
http://embed.plnkr.co/P6bLrajSHzkTdftcMHTw/

In chrome. open debug window with F12.
You need to resize a lot and fast, passing the boundary of ng-if. Well not that much in fact, it happens very fast. Not sure if it depends on the computer used.

You will eventually see the error in the console.

[krnlde]

A downgrade to 1.1.3 avoids this issue if anyone is desperate for a quick-fix.

[ngson]

But there's no version 1.1.3 to download at least from here: https://cdnjs.com/libraries/angular-ui-bootstrap/. Do you @krnlde know nearest version that works?

[krnlde]

1.3.3 sorry.

I put the following semver in my bower.json: "angular-bootstrap": "^1.1.2",

[rarkins]

Anyone already studied how many features and fixes are missing from that version compared to latest?

[krnlde]

I was looking for the same (a changelog or at least some release notes), but couldn't find a thing. Though https://github.com/angular-ui/bootstrap/releases hints that 1.3.3 is the last major 1. A major version bump could potentially introduce breaking API changes if the devs comply to the semver scheme. I didn't experience any, but I'm not using the full range angular bootstrap has to offer.

To the devs: https://github.com/blog/1547-release-your-software

[glebtv]

Wrapping this
https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js#L180-L184
with if (tooltip) { } seems to fix this

[glebtv]

Seems to happen for me when navigating to another view with ui-router while tooltip is present on a page (like browser back button / mouse side button while over element with tooltip)

[ngson]

Yeah that could fix it. Interestingly, for me the popover is still shown fine, through there seems to be a delay, in case of that error,

[RobJacobs]

This is caused by a race condition where the tooltip/popover open and close events are being called back to back. If you use popover-popup-delay="250" it should give enough of delay to mitigate the race condition.

[Rouche]

popover-popup-delay does not help. try it in my plunk.

Downgrade to 1.3.3 means you have to change back to popup-trigger="{{a string}}" this is one i remember. Im pretty sure there are other that i was not affected by.

A simple if is easy to put in there no?

[RobJacobs]

@Rouche Yes it does. here is a plunk with the delay set to 500 and I can't get the error to occur (sorry, 250 was not long enough). I'm not suggesting this is the final solution, but it can be an effective work around until #6226 lands. We should have a default delay set on the tooltip to avoid getting in the race condition in the first place.

[Rouche]

Sorry rob. A bit harder with 500 yes, you need to be straight between the 2 digests.

But the problem will always arrise. Just need to wait 500 to resize back to below 400 and... poof!

angular.js:13920 TypeError: Cannot read property 'offsetHeight' of null
at ui-bootstrap-tpls.js:4886
at angular.js:19612
at completeOutstandingRequest (angular.js:5964)
at angular.js:6243

[shenlong]

for this issue, why not in at line 180:
https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js#L180
Use angular.isDefined(tooltip && tooltip.offsetHeight)

var currentHeight = angular.isDefined(tooltip && tooltip.offsetHeight) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');

[ngson]

Please any updates on this issue? 😅 Can the null-check addition here cause the popover not to show or some other issue? It seems an easier fix than using the delay, because not everyone needs the delay.

[shenlong]

@ngson Seems like the angular.isDefined is not a good check for as it will give a true and tooltip.offsetHeight will be null when there is a quick page change.

Instead, I have used this to check for a valid value:
''''
var currentHeight = (tooltip && !isNaN(tooltip.offsetHeight)) ? tooltip.offsetHeight : tooltip.prop('offsetHeight');
''''

No more errors for now.

[ngson]

OK @shenlong, thank you for the info. So we just need to make a PR based on your suggestion and then release new version with this fix?

[ngson]

Uhmm, how can I request for push permission to this repo? 😅

[ngson]

Uhmm, sorry for repeating my self, but how can I request for push permission to this repo? 😅