CODEWITHSUNDEEP
javascriptangularjsangular-material
Syed Arshad
Syed Arshad

Reputation: 106

Suggest a quick workaround to prevent md-menu from closing on md-menu-item's click

I am trying to prevent md-menu from closing on md-menu-item's click. I have achieved it with the following fix in angular material's menuServiceProvider.

Changing line 286 in https://github.com/angular/material/blob/master/src/components/menu/js/menuServiceProvider.js would allow for this.

if (!target.hasAttribute('disabled') && !target.hasAttribute('md-menu-disable-close') &&
   (!closestMenu || closestMenu == opts.parent[0])) { close(); }

But looking for an alternative to do this.

Upvotes: 3

Views: 3586

Answers (4)

Rizwan
Rizwan

Reputation: 4463

need to open menu after click you can simpley try this with click : md-prevent-menu-close="md-prevent-menu-close"

In angular 1.x

<i class="material-icons" 
   ng-click="$ctrl.deleteAlerts(item.MessageNumber)"
   md-prevent-menu-close="md-prevent-menu-close">
   delete
</i>

And In angular 2.x, or angular 6

<i class="material-icons" 
       (click)="deleteAlerts(item.MessageNumber)"
       md-prevent-menu-close="md-prevent-menu-close">
       delete
</i>

Upvotes: 2

Dijo
Dijo

Reputation: 238

I was also faced same issue - menu item closing when click event triggers and I added md-prevent-menu-close="md-prevent-menu-close" inside of my menu content where ever I use ng-click, ui-sref etc this issue resolved. Sample code snippet below

<md-menu>
  <md-button class="md-icon-button">
    <i class="material-icons md-notification-badge" >notifications</i>
  </md-button>
    <md-menu-content class="alert-menu" width="6" >
      <md-menu-item  ng-repeat="item in $ctrl.myAlertsNotifications">
        <div><i class="material-icons">{{item.icon}}</i></div>
        <i class="material-icons" ng-click="$ctrl.deleteAlerts(item.MessageNumber);" md-prevent-menu-close="md-prevent-menu-close">delete</i>
      </md-menu-item>
    </md-menu-content>
  </md-menu>

Upvotes: 1

Reetu G
Reetu G

Reputation: 1

There is this attibute, which you can add to your md-menu-item element, given by angular js called md-prevent-menu-close which will prevent closing of md-menu on any of it's item's click. For more detailed info: https://material.angularjs.org/latest/api/directive/mdMenu

Thank you.

Upvotes: 0

Syed Arshad
Syed Arshad

Reputation: 106

I got a best work around for this issue, as the md-menu component looks for clicks from elements that have one of these attributes ['ng-click', 'ng-href', 'ui-sref'], we can create our own version of ng-click, and use that for any click events inside md-menu, like so:

app.directive('myClick', function ($parse, $rootScope) {
return {
    restrict: 'A',
    compile: function ($element, attrs) {
        var fn = $parse(attrs.myClick, null, true);
        return function myClick(scope, element) {
            element.on('click', function (event) {
                var callback = function () {
                    fn(scope, { $event: event });
                };
                scope.$apply(callback);
            })
        }
    }
}
})

...and in html...

<md-menu>
<md-button>Open Menu</md-button>
<md-menu-content>
    <md-button my-click="doSomething()">Click me without closing the menu</button>
</md-menu-content>
</md-menu>

Upvotes: 0

Related Questions