ng-select: Uncaught TypeError: Cannot read property 'scrollTop' of null

Describe the bug I have an angular app with a component which has encapsulation set to ViewEncapsulation.ShadowDom. Inside the template of this component I’m using a ng-select component. Through items input I’m passing 15 items to ng-select component.

I’m getting an error in the console when:

I click ng-select component and scroll down in the dropdown
I click ng-select component, select one of the first top items in the dropdown and then click on it again.

Error that I’m getting is: Uncaught TypeError: Cannot read property 'scrollTop' of null

Through my testing I have noticed that this error appears when:

a component with encapsulation set to ViewEncapsulation.ShadowDom is using a ng-select component in its template and
is passing to it an array of items long enough that it creates a scroll bar in a dropdown

I’m setting encapsulation to ViewEncapsulation.ShadowDom because this solves some problems when I’m using the component for @angular/elements.

Reproducible example Example which reproduces described behaviour

To Reproduce Steps to reproduce the behavior:

Clone or download the repository provided in reproducible example
Build and serve the app using ng serve command
Do the steps described above

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 18 (5 by maintainers)

Commits related to this issue

fix: use composePath while handling scroll closes #1317 — committed to ng-select/ng-select by varnastadeus 4 years ago
fix: use composePath while handling scroll (#1758) closes #1317 — committed to ng-select/ng-select by varnastadeus 4 years ago

Most upvoted comments

Looks like issue is fixed only in master. We are still using angular8 so is there any plan to apply this fix to 3.x branch (and other branches)?

snehal4it on Jan 29, 2021

The error also exists in (current) Version 10.0.4 of ng-select with Angular 15.2.x with enabled ViewEncapsulation.ShadowDom.

I’m pretty sure the error was fixed before but is back since several versions, but it may also be that I have not noticed it.

Please re-open the issue again. Thx!

nettags on Apr 14, 2023

same issue here when using ViewEncapsulation.ShadowDom

File webpack:///./node_modules/@ng-select/ng-select/fesm2015/ng-select-ng-select.js.pre-build-optimizer.js line 2264 col 53 in l._next (e) => this._onContentScrolled(e.target.scrollTop)));

bartes on Dec 2, 2019

Hello,

we’re also encountering the same issue when using ViewEncapsulation.ShadowDom/Angular Elements

benoitjchevalier on Aug 14, 2019

Can confirm that the bug still exists inside ShadowDom elements.

~/... (... ✗) npm list @ng-select/ng-select
...@0.0.0 /...
├── @ng-select/ng-select@10.0.4

zone.js:182 Uncaught TypeError: Cannot read properties of null (reading 'scrollTop')
    at Object.next (ng-select-ng-select.mjs:1599:73)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at endDuration (audit.js:17:28)
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at AnimationFrameAction.<anonymous> (timer.js:23:28)
    at AnimationFrameAction._execute (AsyncAction.js:56:18)
    at AnimationFrameAction.execute (AsyncAction.js:44:28)
    at AnimationFrameScheduler.flush (AnimationFrameScheduler.js:11:33)
    at AnimationFrameAction.js:14:125
    at timer (zone.js:2405:41)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Zone.runTask (zone.js:178:47)

kmiasko on Mar 6, 2024