Title:

How to disable Ctrl+A (Select All) in Angular Material Multi-Select Dropdown?

Question:

I am working on an Angular project where I have a multi-select dropdown using Angular Material. I want to disable the Ctrl+A (Select All) functionality within this dropdown. Below is the code snippet for my multi-select dropdown:

<div class="samsung-select samsung-data-select samsung-catalog-select" *ngIf="showareaFilter">
  <label>area</label>
  <mat-form-field appearance="fill" (click)="onSelectClick('areas')">
    <mat-label>All areas</mat-label>
    <mat-select [formControl]="areas" (selectionChange)="onOptionSelected('areas', $event)" (closed)="resetTextFilter('areas')" multiple>
      <input #areaSelect (keyup)="filterareaByNames($event.target.value)" (keydown.space)="$event.stopPropagation()" (input)="handleInputEvent('areas', $event.target.value)" class="samsung-text-input samsung-metric-filter" type="search" placeholder="Filter List" />
      <mat-label class="samsung-no-result" *ngIf="filterCountries.length <= 0 && filterStates.length <= 0 && filterCities.length <= 0">No results found</mat-label>
      <mat-optgroup *ngIf="filterCountries.length > 0" label="Country">
        <mat-option *ngFor="let l of filterCountries" [value]="l">{{l.name}}</mat-option>
      </mat-optgroup>
      <mat-optgroup *ngIf="filterStates.length > 0" label="State">
        <mat-option *ngFor="let l of filterStates" [value]="l">{{l.name}}</mat-option>
      </mat-optgroup>
      <mat-optgroup *ngIf="filterCities.length > 0" label="City">
        <mat-option *ngFor="let l of filterCities" [value]="l">{{l.name}}</mat-option>
      </mat-optgroup>
      <mat-optgroup>
        <mat-option style="display:none" value=""></mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
</div>

Additional Context:

I am using Angular Material’s mat-select for the dropdown.
The multi-select dropdown is part of a form where users can filter and select multiple options from countries, states, and cities.
I want to ensure that Ctrl+A does not select all options in the dropdown.
What I’ve Tried:

Adding (keydown.control.a)=”$event.stopPropagation()” to the input element inside the mat-select.
Tried other combinations of key event bindings but to no avail.

What I’m Looking For:

I’m looking for a way to effectively prevent the Ctrl+A (Select All) functionality from being triggered within this dropdown component. Any guidance or alternative solutions would be greatly appreciated.