Console error when data-simplebar applied to dynamically generated element

Current Behavior

I’m using AngularJS 1.5 and Angular Material 1.1.14. Adding data-simplebar seems to work fine except when applied to a div inside the material md-sidenav directive. I get the following error in the browser console:

angular.js:14195 TypeError: Cannot read property ‘offsetHeight’ of undefined at SimpleBar.recalculate (simplebar.js:4167)

I suspect this is because the md-sidenav is dynamically generated. The error doesn’t show up until I click to view the sidenav and then hover over the scrollable area.

I also sometimes see this error:

Error: this.heightAutoObserverEl is undefined

Suggested solution(s)

I wrapped the _proto.recalculate() code inside if (this.heightAutoObserverEl !== undefined) {...} and the console error no longer appears. Also, simplebar still seems to work fine. Honestly, not sure if this is the best solution though.

Additional context

Your environment

Software	Version(s)
SimpleBar	4.0
Browser	Chrome, Firefox
npm/Yarn
Operating System	Mac OS 10.14.5

[kubami9]

Had the same problem without AngularJS and I think I found solution

• SimpleBar 4.2.3
• Brave (Chrome) and Firefox
• npm
• Ubuntu 18.04.3 LTS

Issue description: I have content in a div with position absolute and it’s in a wrapper with resizable functionality on which I apply simplebar. Inside the content div I have accordions. When resizing the wrapper simplebar recalculates and everything goes right but when switching accordions in child component it makes content taller but simplebar can’t have any clue about it so I recalculate manually and get such error TypeError: Cannot read property 'offsetHeight' of undefined at SimpleBar.recalculate (simplebar.esm.js:533) at HTMLDivElement.toggleAccordion (init.js:63) (and it doesn’t work)

Solution: TL;DR remove data-simplebar attribute from your HTML element. (I think it’s also worth pointing out in the docs).

When you write: const simpleBar = new SimpleBar(document.querySelector('.someElement')); in JS it creates new instance of SimpleBar for this element. If you don’t have previously mentioned attribute on your HTML element it’s initialized with init function containing initDOM function which does all the stuff including creating and appending this.heightAutoObserverEl which is actually a div and everything works fine. If you have that attribute however, element is found by data attribute before getting to your JS declaration of simpleBar and initDOM is fired on it so this.heightAutoObserverEl exists only there. Then when everything is loaded initDOM doesn’t fire anymore on your instance and therefor you’re left with new instance which doesn’t have this.heightAutoObserverEl so your code fails in the 1st line of recalculate function. The fact it partially works (in my case) is that when resizing component it uses old intance of recalculate in the context of first SimpleBar.

This is my guess and it works but if the reason turns out to be different I’m curious to know about it.

[Grsmto]

Actually yes if your inner element has position: absolute it can’t trigger an overflow on its parent. This is not a SimpleBar issue but just pure CSS I believe. Also for angular please have a try with the simplebar-angular wrapper. So I’m gonna close this issue! Thanks!