Prevent Mat-Option from closing the dropdown

Question

I want to know if it is possible to prevent the closing of the dropdown if one mat-option is selected? I am using stopPropagation and preventDefault on the click event, but it doesn't work. Please have a look at the following code.

• aktual behaviour: clicking on 'Toyota' closes the dropdown
• expected behaviour: clicking on 'Toyota' shouldn't close the dropdown

<mat-form-field appearance="fill">
  <mat-label>Cars</mat-label>
  <mat-select [formControl]="carControl" multiple>
    <mat-select-trigger>
      {{carControl.value}}
    </mat-select-trigger>
    <mat-option value="BMW">BMW</mat-option>
    <mat-option value="VW">VW</mat-option>
    <mat-option value="Toyota" (click)="$event.preventDefault(); $event.stopPropagation()">Toyota</mat-option>
  </mat-select>
</mat-form-field>

Any help is welcome.

Answer 1

I found a workaround. Disabling the option which shouldn't close the dropdown and changing the styling of the disabled option, so it matches the other active options.