Angular material md-select not closing when in mdDialog

Question

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.

I found a fix. It's not the prettiest one, but it works. What you can do is get the click event outside the md-select (where you want your user to click to close the md-select) and use $mdSelect service to hide it ($mdSelect.hide()) — Florin Mateescu, Jul 25 '17 at 18:20

score 1 · Accepted Answer · answered Jul 25 '17 at 18:22

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();
        }
    });

score 0 · Answer 2 · answered Jan 22 '18 at 10:47

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; }

Angular material md-select not closing when in mdDialog

2 Answers2

Linked