Vue-material: Menu can't be closed if menu is in sidenav

[byrustamzade]

when menu is in sidenav and open, it can not be closed on click sidenav.

[jkirkland-cityoflewisville-com]

Same thing for <md-select> (which uses <md-menu>). I have been trying to find a solution but so far no luck. The JQuery below prevents the menu from opening at all.

$(document).on("click",".md-sidenav-content",function(){
    if ( $(".md-select-content").hasClass("md-active") ){
        $(".md-select-content").remove();
    }
})

[jkirkland-cityoflewisville-com]

This JQuery closes a menu in a sidenav, but only works once. After the first time, the menu will not re-open.

$(document).on("mousedown",".md-sidenav-content",function(){
    if ($(".md-menu-content.md-active").length ){
        $(".md-menu-content.md-active").remove();
    }
})

[jkirkland-cityoflewisville-com]

This one seems to work :) It allows <md-select> in sidenav with click-on-sidenav to close the <md-menu>

$(document).on("mousedown",".md-sidenav-content",function(){
   if ($(".md-menu-content.md-active").length ){
      $("div.md-backdrop.md-menu-backdrop.md-transparent.md-active").click();
   }
})

[marcosmoura]

@jkirkland-cityoflewisville-com Thank you for the workaround, but I will try to fix it in a Vue.js way. It is a bug :(

[jkirkland-cityoflewisville-com]

Awesome. Thank you, Its a great library

[nue-melexis]

Hey,

I think this is the same like a select menu not closing inside a dialog.
This is because the z-index of the backdrop of the menu is smaller/equal the z-index of dialog-backdrop/sidenav-backdrop (set the z-index of the menu higher in dev tools and it closed like expected)

Since this is done via css, it is not so dynamic.
I think you need to recalculate the z-index in JS (incrementing it for nested elements)

** Maybe also wrap the menu-content + backdrop in a div (like with dialog)