Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

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

Open
damonjentree opened this issue Oct 10, 2016 · 3 comments
Labels
needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P4: minor Minor issues. May not be fixed without community contributions. type: bug ux: integration
Milestone

Comments

@damonjentree
Copy link

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: *

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
Copy link

tatsujb commented Oct 2, 2018

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 Splaktar changed the title using ng-click, md-select doesn't close when used within md-menu-item select: using ng-click, dropdown panel doesn't close when used within md-menu-item Oct 2, 2018
@Splaktar
Copy link
Contributor

Splaktar commented Oct 2, 2018

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

@Splaktar Splaktar self-assigned this Oct 2, 2018
@Splaktar Splaktar added this to the 1.1.12 milestone Oct 2, 2018
@Splaktar Splaktar added type: bug P4: minor Minor issues. May not be fixed without community contributions. ux: integration needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Oct 2, 2018
@Splaktar
Copy link
Contributor

Splaktar commented Oct 2, 2018

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.

@Splaktar Splaktar modified the milestones: 1.1.12, 1.1.13 Jan 3, 2019
@Splaktar Splaktar modified the milestones: 1.1.13, 1.1.14 Feb 10, 2019
@Splaktar Splaktar removed their assignment Feb 23, 2019
@Splaktar Splaktar modified the milestones: 1.1.14, - Backlog Feb 23, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P4: minor Minor issues. May not be fixed without community contributions. type: bug ux: integration
Projects
None yet
Development

No branches or pull requests

3 participants