Unhandled Promise rejection: Cannot read properties of null (reading 'clientHeight') ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of null (reading 'clientHeight')

[ammad172]

We have recently upgraded to Angular 15.2.9 and install ng-select version 9.1.0. Whenever I Open dropdown this error appeared and dropdown wont open unless I click it again to open. This only happens first time but 2nd time if click ,it start working fine.
Below is the error detail and my packages detail which I am right now.

Unhandled Promise rejection: Cannot read properties of null (reading 'clientHeight') ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read properties of null (reading 'clientHeight')
at ng-select-ng-select.mjs:1709:41
at _ZoneDelegate.invoke (zone.js:375:26)
at Zone.run (zone.js:134:43)
at zone.js:1278:36
at _ZoneDelegate.invokeTask (zone.js:409:31)
at Zone.runTask (zone.js:178:47)
at drainMicroTaskQueue (zone.js:588:35)
at ZoneTask.invokeTask [as invoke] (zone.js:494:21)
at invokeTask (zone.js:1664:18)
at globalCallback (zone.js:1695:29) TypeError: Cannot read properties of null (reading 'clientHeight')
at http://localhost:4200/vendor.js:197540:35
at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:8240:158)
at Zone.run (http://localhost:4200/polyfills.js:7977:35)
at http://localhost:4200/polyfills.js:9325:28
at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:8273:171)
at Zone.runTask (http://localhost:4200/polyfills.js:8030:37)
at drainMicroTaskQueue (http://localhost:4200/polyfills.js:8482:23)
at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:8368:11)
at invokeTask (http://localhost:4200/polyfills.js:9792:12)
at globalCallback (http://localhost:4200/polyfills.js:9829:21)

Below are my package details

"dependencies": {
"@angular/animations": "^15.2.9",
"@angular/cdk": "^8.0.0",
"@angular/common": "^15.2.9",
"@angular/compiler": "^15.2.9",
"@angular/core": "^15.2.9",
"@angular/forms": "^15.2.9",
"@angular/platform-browser": "^15.2.9",
"@angular/platform-browser-dynamic": "^15.2.9",
"@angular/platform-server": "^15.2.9",
"@angular/router": "^15.2.9",
"@ng-bootstrap/ng-bootstrap": "^7.0.0",
"@ng-select/ng-select": "^9.1.0",
"@popperjs/core": "^2.11.6",
"@types/underscore": "^1.11.4",
"angular-user-idle": "^4.0.0",
"angular2-text-mask": "^9.0.0",
"bootstrap": "^4.3.1",
"cdk-drag-scroll": "0.0.6",
"chart.js": "^4.4.0",
"core-js": "^3.25.5",
"docx-preview": "^0.1.14",
"dompurify": "^2.4.1",
"font-awesome": "^4.7.0",
"g": "^2.0.1",
"intl": "^1.2.5",
"jquery": "^3.6.2",
"mdn-polyfills": "^5.20.0",
"moment": "^2.29.4",
"ng-recaptcha": "^11.0.0",
"ng2-file-upload": "^1.3.0",
"ng2-pdf-viewer": "^6.4.1",
"ng2-signalr": "^10.1.0",
"ngx-color-picker": "^13.0.0",
"ngx-image-cropper": "^6.3.1",
"ngx-order-pipe": "^2.0.2",
"ngx-pipes": "^2.7.5",
"ngx-treeview": "^10.0.2",
"ngx-virtual-scroller": "^4.0.3",
"node-sass": "^9.0.0",
"p": "^0.2.0",
"prettier": "^2.8.0",
"rimraf": "^3.0.2",
"rxjs": "^7.8.1",
"signalr": "^2.4.3",
"storage-emitter": "^2.0.1",
"tslib": "^2.6.2",
"underscore": "^1.13.6",
"webpack-dev-server": "^4.15.1",
"zone.js": "^0.14.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.2.9",
"@angular/cli": "^15.2.9",
"@angular/compiler-cli": "^15.2.9",
"@angular/language-service": "^15.2.9",
"@angular/localize": "^15.2.9",
"@types/jasmine": "^4.3.1",
"@types/jasminewd2": "^2.0.10",
"@types/jquery": "^3.5.14",
"@types/node": "^18.11.14",
"@types/quill": "^2.0.10",
"codelyzer": "^0.0.28",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"rxjs-tslint": "^0.1.7",
"ts-node": "~4.1.0",
"typescript": "^4.9.4",
"webpack": "^5.88.2"
}

Right now none of the versions are working and throwing same error.
maybe there is any compatibility issue with zone.js or typescript version.

[pavankjadda]

@ammad172 Are you able to reproduce this in StackBlitz?

[ammad172]

@ammad172 Are you able to reproduce this in Stack Blitz?

haven't tried in Stack blitz but one thing to mention that its happening while ng-select is wrapped under ng-template. Otherwise those which are not under it working fine

[pavankjadda]

@ammad172 Are you able to reproduce this in Stack Blitz?

haven't tried in Stack blitz but one thing to mention that its happening while ng-select is wrapped under ng-template. Otherwise those which are not under it working fine

Interesting. Please share StackBlitz example