Angular-material : Md-select In Md-dialog Not Closing

I've created a simple directive that consists in a form with few md-input and one md-select. I've used my directives in a few pages now and everything works fine, but now i would l

Solution 1:

Using the method proposed by Freego above throws an error for me on angular-material 1.1.5

TypeError: Cannot read property '$viewValue'ofundefined

I got this fixed in angular-material 1.1.5 by setting the z-index for <md-backdrop /> alongside .md-select-menu-container.

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

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

Solution 2:

For those interested here is what i've done to fix my problem. I know it's not the most elegant solution, but it worked for me. If anyone has a better idea feel free to share with us !

HTML :

<md-input-containerflex><label>Category</label><md-selectng-model="selectedCategory"md-on-open="dirtyFix()"><md-optionng-repeat="cat in categories"ng-value="{{cat}}"ng-selected="$first">{{cat.name}}
                    </md-option></md-select></md-input-container>

JS :

$scope.dirtyFix= function () {
    $timeout(function () {
        $(".md-scroll-mask").css("z-index", 899);
        $(".md-scroll-mask").click(function () {
            $(".md-select-menu-container").remove();
            $(".md-scroll-mask").css("z-index", -1);
        });
    }, 500);
}

CSS :

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

Had to set a timeout to let the modal render and then toy with z-index and clicklistener.

It's far from perfect but maybe it'll inspire you !