How to open mat-select on the selected option

Question

So this is the default behaviour of mat-select(selected option opens directly) and this is what my code gives because I enclosed the mat-option fields inside a div tag(for styling purpose)

Below is my code

component.html

<mat-select [(value)]="selectedGroup" class="text-head" required panelClass="headerPanel">                  
    
    <mat-form-field *ngIf="groupList.length>4" class="organistation-searchField" appearance="outline">
        <input (keydown)="$event.stopPropagation()" [(ngModel)]="searchTerm" matInput (ngModelChange)="_globals.dropdownSearch($event,'group_list','headerPanel')" placeholder="Search Zone">
        <mat-icon matSuffix style="color:#24539f;">search</mat-icon>
    </mat-form-field>

    <div class="panel-optn" style="max-height:190px;">
        <mat-option class="group_list" *ngFor="let group of groupList" [value]="group.group_id">
            {{group.name}}
        </mat-option>
    </div>    
</mat-select>

component.css

.panel-optn{
   overflow-y: auto;
   scrollbar-color: slategrey rgba(0,0,0,0.3); /* thumb and track color */
   scrollbar-width: thin;
}

.panel-optn::-webkit-scrollbar {
   width: 0.5em;
 }


.headerPanel{
   position: relative;
   top: 40px;
   overflow-y: hidden !important;
   left: -8%;
   max-width: 235px !important;
}

Using the panel-optn class on mat-select and removing the div tag solves the problem. But I can't do that because then the search bar won't be fixed to the top. Is there a way to bring the default behaviour back?

It may be possible to do styling overrides for material classes, usually takes me some searching and inspecting of elements but It's possible (chrome devtools trial and error). Just make sure you put the styling in a global stylesheet so you don't need to use ng-deep, and I usually prepend thi class with my component name so I know it's only going to affect this instance of mat-select. — iamaword
right click, inspect element, start looking at the css elements that affect the element, and changing properties by creating a new class at each level till you get the desired changes. There are videos/tutorials out there on how to use chrome dev tools/ firefox dev tools to create css, material just makes it a bit trickier (may need to add !important to the class, and definitely have to have it at a global css level) — iamaword

kamil kamil · Accepted Answer · 2020-09-30T13:28:40

So it is not scrolling to last selected element on select open.

I would try to override it with some kind of directive basing on scrollTo method

How to open mat-select on the selected option

1 Answers