CODEWITHSUNDEEP
javascriptangularangular-material
Guerric P
Guerric P

Reputation: 31805

How to scroll the underlying MatDialog when MatSelect is open?

When opening a MatSelect in a regular page, it is possible to customize the scroll behavior through the MAT_SELECT_SCROLL_STRATEGY injection token and use the NoopScrollStrategy in order to scroll the underlying page while keeping the MatSelect in place.

However, when the MatSelect is being opened from a MatDialog, the MAT_SELECT_SCROLL_STRATEGY has no effect at all and I can't scroll the underlying MatDialog.

I've created a Stackblitz to demonstrate the problem.

One workaround is to set a backDropClass with pointer-events: none but it also disables the close behavior when I click it, which I want to keep. I'd also like to avoid hacks based on z-index if possible.

Upvotes: 4

Views: 937

Answers (1)

Sai Vamsi
Sai Vamsi

Reputation: 927

I have tried to close the matSelect when clicked outside menu using pure css but wasn't able to find a way. So I had to make code changes in the ts file.

I have edited you stackblitz here and it seems to be working. Please verify..

Adding the below code in your global style.css/scss file will allow you to scroll the dialog while the matselect is open and will also enable the dialog to close when clicked outside:

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  pointer-events: none;
}

.cdk-overlay-dark-backdrop {
  pointer-events: auto !important;
}

To close the matSelect when clicked outside menu, had to make .ts code changes. Please refer the stackblitz link for that..

Upvotes: 3

Related Questions