select: using ng-click, dropdown panel doesn't close when used within md-menu-item

[damonjentree]

Actual Behavior:

• What is the issue? *
  When nesting an ng-select within a md-menu-item element the md-select does not close when the md-menu closes. This leaves the md-option values showing on screen when the md-menu has closed.
• What is the expected behavior?
  I would like all child elements to close when the md-menu is closed.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:

CodePen Demo Link

• Details:

If the arrow is clicked, the md-menu opens. If you do not click anything, but click an empty space the md-menu will close as does all children nested within.

Click the arrow again to open the menu. Click on the md-select but do not choose an option. Next click off of the input somewhere in space. The md-menu will close, but the md-select options will remain visible be on screen. You have to click again in an empty area to close the options.

Angular Versions: *

• Angular Version: github:angular/[email protected]
• Angular Material Version: github:angular/[email protected]

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 53.0.2785.116 (64-bit)
• OS: * OSX EL Capitan
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[tatsujb]

I have this in angular 6.0.4, angular material/cdk 6.2.1

so long as you put DOM call to execute on the element in the list such as (click) or (mousedown) the dropdown won't close.

I've tried calling a hide() or a close() method on the mat-dropdown by declaring a DOM selector the calling a hide() on that selector inside the same code as the rest :

           <mat-form-field class="dropdown-style">
              <mat-select #dropdown [placeholder]="currentClientName">
                <mat-option *ngFor="let client of clientSet" [value]="currentClientName">
                  <div (mousedown)="setDropdownClient(client); dropdown.hide()">{{client['name']}}</div>
                </mat-option>
              </mat-select>
            </mat-form-field>

but this just said the method didn't exist.

It seems people online have been having success with forcing a higher z-index :

/deep/ .mat-select-menu-container {
    z-index: 900 !important;
 }

/deep/ mat-backdrop.mat-select-backdrop {
    z-index: 899 !important;
}

but this did not work for me.

I was looking for my own implementation of hide() since the internet is full of recomendations to do this : #3701 (comment)

https://stackoverflow.com/questions/44281188/angular-material-md-select-not-closing-when-in-mddialog

but all involve (what I consider to be) dirty listeners in the form of Jquery.

Ideally I'd do this in a more "Angular 6" way.

Any tips?

[Splaktar]

@tatsujb Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.

[Splaktar]

I can still reproduce this in 1.1.10. Here's an updated CodePen.

My guess is that both the menu and select have md-backdrops that individually need to be clicked. Adding md-no-backdrop as part of #11346 and #11443 should allow developers to customize/fix this behavior.