Angular-Material: md-select в md-диалоге не закрывается

Question

Я создал простую директиву, которая состоит из формы с несколькими md-input и одной md-select,

Я использовал свои директивы на нескольких страницах сейчас, и все работает нормально, но теперь я хотел бы использовать его внутри md-dialog и он не работает должным образом, я не могу закрыть меню md-select, если я щелкаю за его пределами, даже если я фокусирую ввод md.

Таким образом, пользователь может закрыть меню только двумя способами: либо выбрать опцию, либо закрыть диалоговое окно.

Это не так плохо, но я нашел это довольно раздражающим.

Вот содержание диалога:

<md-dialog aria-label="Modal" ng-cloak flex="75">
    <md-toolbar ng-class="md-primary">
        <div class="md-toolbar-tools">
            <h2 translate>personModal.update</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon md-svg-src="img/ic_close_white.svg" aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <person-form person="person"></person-form>
</md-dialog>

И содержание директивы:

<form name="createPersonForm" layout="row" layout-align="space-between center" class="bg-sec query-fields">
    <md-input-container flex class="full-width-input">
        <label translate>createPerson.form.firstname</label>
        <input name="firstname" ng-model="person.firstname" required md-asterisk/>
        <div ng-messages="createPersonForm.firstname.$error"
             ng-show="createPersonForm.firstname.$touched">
            <div ng-message="required" translate>
                createPersonForm.errors.firstnameMissing
            </div>
        </div>
    </md-input-container>

    <!--                      -->
    <!-- Other md-inputs here -->
    <!--                      -->

    <md-input-container flex class="consumption-filter full-width-input">
        <label translate>createPerson.form.contact</label>
        <md-select name="contact" ng-model="person.contactId" required>
            <md-option ng-repeat="contact in contacts" ng-value="{{contact.id}}">
                <span>{{contact.name}}</span>
            </md-option>
        </md-select>
        <div class="md-errors-spacer"></div>
        <div ng-messages="createPersonForm.contact.$error"
             ng-show="createPersonForm.contact.$touched">
            <div ng-message="required" translate>
                createPersonForm.errors.contactMissing
            </div>
        </div>
    </md-input-container>

    <md-button class="md-raised bg-white" ng-click="createPerson()" ng-disabled="createPersonForm.$invalid" ng-hide="loading" ><span translate>createPersonForm.errors.createButton</span></md-button>
    <md-progress-circular md-mode="indeterminate" class="md-accent" ng-show="loading"></md-progress-circular>
</form>

Я использую Angular 1.5 и Angular Material 1.0 .

Я пытался играть с z-index и улучшать угловой / угловой материал, но это не решает проблему.

Я рассматриваю закрытие меню программно, когда md-select теряет фокус, но я нахожу это довольно уродливым. И я пока не знаю, как это сделать.

Заранее спасибо!

Answer 1

Для тех, кто заинтересован, вот что я сделал, чтобы решить мою проблему. Я знаю, что это не самое элегантное решение, но оно сработало для меня. Если у кого есть идея получше, не стесняйтесь поделиться с нами!

HTML:

            <md-input-container flex>
                <label>Category</label>
                <md-select ng-model="selectedCategory" md-on-open="dirtyFix()">
                    <md-option ng-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;
}

Пришлось установить таймаут, чтобы позволить модальному рендеру, а затем поиграть с z-index и clicklistener.

Это далеко от совершенства, но, возможно, это вдохновит вас!

Answer 2

Использование метода, предложенного Freego выше, выдает ошибку для angular-material 1.1.5.

TypeError: Cannot read property '$viewValue' of undefined

Я установил это в угловом материале 1.1.5, установив z-index для <md-backdrop /> рядом .md-select-menu-container,

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

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