Issue in ngx-scrollbar with mat-select of angular-material

[vartikaagrawal411]

Reproduction

I need to use ngx scrollbar inside mat select component. mat select get adjusted according to content given on top or bottom. So, I am giving max-height like this and autoHeightDisabled= false ,

but, mat select dropdown is not adjusting it's position on top, and is getting clipped

Without using ngx-scrollbar mat-select is working as expected.

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/ngx-scrollbar-jpa7wb?file=src%2Fapp%2Fscroll-event-example%2Fscroll-event-example.html,src%2Fapp%2Fscroll-event-example%2Fscroll-event-example.module.ts,src%2Fapp%2Fscroll-event-example%2Fscroll-event-example.scss,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css

Steps to reproduce:

1. Go to Scroll-event section
2. see the behavior in given dropdown

Expected Behavior

mat select dropdown should adjust itself on top so that content don't get clipped

Actual Behavior

mat select dropdown is not getting adjusted on top and is getting clipped

Environment

• Angular: 16.1.5
• ngx-scrollbar: 13.0.2
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[MurhafSousli]

The MatSelect component cannot maintain the scroll position since its scrollable viewport has changed.

Here is a workaround that uses the opened output to manually scroll to the selected item, but it isn't ideal since there is a tiny delay from the opened output stackblitz

Maybe you can find a solution with a faster event like combining click event with selected output and scroll to element position asap

[MurhafSousli]

I am working on a directive the uses the original viewport but its still under development.

[vartikaagrawal411]

Hi, Thanks for your suggestion but the workaround you have mentioned will probably not applicable in my case.

The issue is not related to the scroll behavior change on click of dropdown. The ideal behavior is the dropdown options overlay to open with proper position so that the content is visible in the view port. (Current behavior is dropdown options overlay is opening on the lower side of the box, and due to this options are getting trimmed/not visible. Ideally it would have auto adjusted and came on the upper side of the box)

Issue

Expected

[MurhafSousli]

In the stackblitz it works as expected! it opens at the upper side when there is not enough space at the bottom.

I am not sure if I understood your issue, could you add two select controls next to each other and show the difference

[vartikaagrawal411]

yes I have added both expected and current behavior dropdowns in scroll event page.. one with [autoHeightDisabled]="false" and one without it.. please check it now

[MurhafSousli]

Now I see it, yea so the mat-select decides where the panel should go, and initially when autoHeight is enabled it won't detect its height. why is auto-height needed in your use case?

[vartikaagrawal411]

Incase I don't give [autoHeightDisabled]="false", I need to specify height to my ngx scrollbar.. Without it my mat-select come as blank. I need to get data in mat-select from an Api, now data can be 1 or 16 so I don't want to give specific height to my scrollbar as it will create extra space in it. This is the reason I am using [autoHeightDisabled]="false" without height. I have made some changes in stackblitz.. you can see the difference between the three form fields.

[MurhafSousli]

This will be fixed in the next version

[skinet2009]

@MurhafSousli Please tell me when the new version is planned to be released?

[MurhafSousli]

@MurhafSousli Please tell me when the new version is planned to be released?

@skinet2009 Its almost done, needs to update the documentation and release, either by the end of this weekend or next week. I will ping you here.

[skinet2009]

@MurhafSousli Please tell me, will there be support for the solution for Angular 16?

[MurhafSousli]

I am not sure, try it out!

Add the following in your package.json

 "overrides": {
    "ngx-scrollbar": {
        "@angular/common": "^16.0.0",
        "@angular/core": "^16.0.0",
        "@angular/cdk": "^16.0.0"
     }
  }

[skinet2009]

I am not sure, try it out!

Add the following in your package.json

 "overrides": {
    "ngx-scrollbar": {
        "@angular/common": "^16.0.0",
        "@angular/core": "^16.0.0",
        "@angular/cdk": "^16.0.0"
     }
  }

Unfortunately, Angular does not support using libraries with a higher version of Angular. Can't you apply the solution to fix this bug for ngx-scrollbar version 13?

[MurhafSousli]

No, its not possible.