Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(menu): fix options with x-ng-click and data-ng-click not working
Browse files Browse the repository at this point in the history
closes #3258, references #3252
  • Loading branch information
rschmukler committed Jun 21, 2015
1 parent 691dd2f commit 17f38b0
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 12 deletions.
12 changes: 11 additions & 1 deletion src/components/menu/menu-interim-element.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ function MenuProvider($$interimElementProvider) {
// Traverse up the event until we get to the menuContentEl to see if
// there is an ng-click and that the ng-click is not disabled
do {
if (target && target.hasAttribute('ng-click')) {
if (hasAnyAttribute(target, ['ng-click', 'data-ng-click', 'x-ng-click'])) {
if (!target.hasAttribute('disabled')) {
close();
}
Expand All @@ -161,6 +161,16 @@ function MenuProvider($$interimElementProvider) {
opts.mdMenuCtrl.close();
});
}

function hasAnyAttribute(target, attrs) {
if (!target) return false;
for (var i = 0, attr; attr = attrs[i]; ++i) {
if (target.hasAttribute(attr)) {
return true;
}
}
return false;
}
});

// kick off initial focus in the menu on the first element
Expand Down
71 changes: 60 additions & 11 deletions src/components/menu/menu.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,23 +72,72 @@ describe('md-menu directive', function () {
expect(getOpenMenuContainer().length).toBe(0);
}));

it('closes on option click', function () {
expect(getOpenMenuContainer().length).toBe(0);
describe('closes with ng-click', function() {
it('closes on normal option click', function () {
expect(getOpenMenuContainer().length).toBe(0);

openMenu(setup());
openMenu(setup());

expect(something).toBeFalsy();
expect(getOpenMenuContainer().length).toBe(1);
expect(something).toBeFalsy();
expect(getOpenMenuContainer().length).toBe(1);

var btn = angular.element(getOpenMenuContainer()[0].querySelector('md-button'));
btn.triggerHandler({ type: 'click' });
var btn = getOpenMenuContainer()[0].querySelector('md-button');
btn.click();

waitForMenuClose();
waitForMenuClose();

expect(something).toBeTruthy();

expect(getOpenMenuContainer().length).toBe(0);
});

it('closes with data-ng-click', inject(function($rootScope, $compile) {
expect(getOpenMenuContainer().length).toBe(0);

var template = '' +
'<md-menu>' +
' <button ng-click="$mdOpenMenu($event)">Hello World</button>' +
' <md-menu-content>' +
' <md-menu-item>' +
' <md-button data-ng-click="doSomething($event)"></md-button>' +
' </md-menu-item>' +
' </md-menu-content>' +
'</md-menu>';

expect(something).toBeTruthy();
openMenu($compile(template)($rootScope));
expect(getOpenMenuContainer().length).toBe(1);

var btn = getOpenMenuContainer()[0].querySelector('md-button');
btn.click();

waitForMenuClose();

expect(getOpenMenuContainer().length).toBe(0);
}));

it('closes with x-ng-click', inject(function($rootScope, $compile) {
expect(getOpenMenuContainer().length).toBe(0);

var template = '' +
'<md-menu>' +
' <button ng-click="$mdOpenMenu($event)">Hello World</button>' +
' <md-menu-content>' +
' <md-menu-item>' +
' <md-button x-ng-click="doSomething($event)"></md-button>' +
' </md-menu-item>' +
' </md-menu-content>' +
'</md-menu>';

openMenu($compile(template)($rootScope));
expect(getOpenMenuContainer().length).toBe(1);

var btn = getOpenMenuContainer()[0].querySelector('md-button');
btn.click();

waitForMenuClose();

// FIXME - why is the menu not auto-closing ?
//expect(getOpenMenuContainer().length).toBe(0);
expect(getOpenMenuContainer().length).toBe(0);
}));
});

// ********************************************
Expand Down

1 comment on commit 17f38b0

@jzmiejko
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does not fix the problem. I get:
TypeError: Cannot read property 'setAttribute' of null
at MenuController.init
There is:

triggerElement = $element[0].querySelector('[ng-click],[ng-mouseenter]');

and it should include data- and x- prefixes:

triggerElement = $element[0].querySelector('[ng-click],[ng-mouseenter]') || $element[0].querySelector('[data-ng-click],[ng-mouseenter]') || $element[0].querySelector('[x-ng-click],[ng-mouseenter]');

Please sign in to comment.