Angular material md-select not closing when in mdDialog

问题

I am using angular material version 1.1.4, angular version 1.5.9 and I have the following issue with an md-select directive.

I open a dialog using $mdDialog service on a click of a button. The dialog is fullscreen. Inside I have multiple inputs, along with an md-select input. On md-select you can choose multiple items, so it doesn't automatically close after choosing an item from the list. After opening it and selecting the items you desire, you click outside of it to close it and get to the next input, but when used inside an mdDialog window, the click event outside of it doesn't close the md-select.

I searched for this issue, found a few questions but some of them had no answer in months and other questions didn't have a solution for it.

Thank you very much for your time, hopefully you can help me with a clean way to do this. Alternatively I would have to add the click event manually, which I would prefer to avoid.

回答1:

How I solved the issue:

var dialogContainer = angular.element(document.querySelector('.bara-cautare-directive-root')),
        mdSelects = document.getElementsByTagName('md-select');

    dialogContainer.bind('click', function (event) {
        var closeMdSelect = true;

        _.forEach(mdSelects, function (mdSelect) {
            mdSelect = angular.element(mdSelect);
           // what I do here is to check if the click event was triggered by the md-select I want to close. When opening the md-select, it will automatically close it, so I make sure that whenever this md-select is clicked, I don't hide it.
            if (mdSelect.is(event.target) || mdSelect.has(event.target).length != 0) {
                closeMdSelect = false;

                return false;
            }
        });

        if (closeMdSelect) {
            $mdSelect.hide();
        }
    });

回答2:

Credits to User @Lihini. Please refer the answer here at: https://stackoverflow.com/a/46169071/873976

The issue can be resolved by overriding zindex of md-backdrop. Just add the following css

.md-select-menu-container {
    z-index: 900; }

md-backdrop.md-select-backdrop {
    z-index: 899; }

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

标签

angular

angular-material

mddialog

md-select