CODEWITHSUNDEEP
angularjsangular-material
Damon
Damon

Reputation: 4484

Angular Material - How can I close/hide my md-select when I close my menu?

I am using md-menu-item elements in my md-menu. The menu is activated by a button - all is working fine and all uses default angular js.

Within each md-menu-item I have md-select inputs. It looks like this:

...

<md-menu-item>
    <md-input-container>
        <label>My Label</label>
        <md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
            <md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
                {{foo.name}}
            </md-option>
        </md-select>
    </md-input-container>
</md-menu-item>

...

If I open the menu via clicking the button - If I choose nothing and I click off of the <md-select> (anywhere on screen) the md-menu goes away like it should & all is well.

If I click into one of the <md-select> elements, then click somewhere in the screen, the <md-menu> closes, but I can still see the <md-select> element.

Is there a way to "nest" select elements within a menu item so that when I close the menu item, all child elements also close?

Here is a codepen example of what I am seeing.

Thank you for any suggestions!

Upvotes: 5

Views: 6543

Answers (2)

Surendranath Sonawane
Surendranath Sonawane

Reputation: 1737

To hide md-select when you click outside the box . I am using '$mdSelect.hide()' to close md-select dropdown menu. I just put following 3 lines in my main controller.

    $(document).bind('click', function (event) {
        $mdSelect.hide();
    });

Upvotes: 2

Georgy
Georgy

Reputation: 2462

The problem here is with menu and select backdrops which are used to close corresponding elements, when clicked out. So it's angular material thing. You can change z-index of these backdrops. Defaults are specified in variables.scss file (as you can see menu's backdrop is above select's, so you close it first):

$z-index-menu: 100 !default;
$z-index-calendar-pane: 100 !default;
$z-index-select: 90 !default;

That's the only quick fix I see (you can change z-index for these backdrops just in your css).

Upvotes: 1

Related Questions