Angular's mat-select is not closing when clicking outside

Question

I am using angular material's select component to load some options to choose from. When I click on the field, the list of options appear as expected, however, when I click anywhere outside the options, the select does not close. I have noticed that this issue is only persistent on mobile phones, even when inspecting on chrome and changing the dimensions to that of a phone the problem still persists.

component.ts:

<mat-form-field>
    <mat-label>City</mat-label>
    <mat-select formControlName="cityId" (valueChange)="onCityChange($event)">
      <mat-option *ngFor="let city of cities" [value]="city.id">
        {{city.name}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="form.get('cityId').hasError('required')">
        This field is required
    </mat-error>
</mat-form-field>

Ashrik Ahamed · Accepted Answer · 2025-06-16 05:32:06Z

0

In my case the problem solved after i removed this from style.css :


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

answered Jun 16 at 5:32

Ashrik Ahamed

4754 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jitendra Bagul · Accepted Answer · 2023-06-04 11:38:03Z

-1

Please try below approach

  constructor(private renderer: Renderer2) {}



ngOnInit() {
  this.renderer.listen('document', 'click', (event: MouseEvent) => {
    const targetElement = event.target as HTMLElement;
    const matSelectElement = document.querySelector('.mat-select-panel');

    if (matSelectElement && !matSelectElement.contains(targetElement)) {
      // Close the mat-select when clicking outside
      this.matSelect.close();
    }
  });}


<mat-select #matSelect formControlName="cityId" (valueChange)="onCityChange($event)">

edited Jun 4, 2023 at 11:38

answered Jun 4, 2023 at 11:37

Jitendra Bagul

142 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Angular's mat-select is not closing when clicking outside

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related