Reactive form made with angular material as a modal, keeps closing when selecting options of mat-select tags

[dpara73]

Hi Arkon!

This is a great library and thank you for sharing it with us. I have an issue though with the div I'm trying to close by clicking outside of it. The div contains a reactive form made with angular material and some of the controls are selection inputs. When I try to select an option the div closes and I think that the options are shown outside the div. How I can prevent the closure of the form before submiting it? Do you or anyone else have any ideas? Thank you in Advance!

[wcanalhd]

I have the same problem, if anyone as a solution I will be grateful to know it. Edit: I find a solution, just use matNativeControl instead of mat-select, just like the example below:

<mat-form-field>
          <mat-label>Align</mat-label>
          <select matNativeControl formControlName="align">
                   <option *ngFor="let align of aligns" [value]="align">{{align}}</option>
          </select>
</mat-form-field>

[anishchenko-anton]

I have same issue whith mat-select

[sparerd]

Since mat-select draws as an overlay (outside the normal document hierarchy) you will need to add an exception to your "clickOutside" handler. The strategy I've used is to check the ancestors of the clicked element for any element that has the mat-select-panel-wrap class. Essentially asking the clicked element "are you being drawn in a mat-select overlay?".

This should be fairly safe to do, since the overlay for a select button is only present after clicking the button (which would still be in the normal doc hierarchy).

Example:

public onClickOutside(event: MouseEvent): void {
    // you may need to case event as any to avoid TS compilation errors
    const clickingInMatSelect = (event as any)
      .path.some((e: HTMLElement) => e.classList && e.classList.contains("mat-select-panel-wrap");

    if (clickingInMatSelect) {
      return;
    }

    // perform close logic here
  }