Menu submenu trigger swallowing click propagation
cyono opened this issue · comments
Christopher Yono commented
Expected behavior: I can implement a menu item with no submenu items or anchors and write a custom onclick listener for it.
Actual behavior: < ul > and < li > in a project using the dqpl-pattern-library have their click listener propagation stopped by this chunk of code at lines 2736-2758:
/**
* Mouse logic for expandable submenu triggers
*/
(0, _delegate2.default)(elements.menu, '[role="menuitem"]', 'click', function (e) {
e.stopPropagation(); //THIS IS THE PROBLEM CHILD
var trigger = e.delegateTarget;
if (trigger.hasAttribute('aria-controls')) {
toggleSubmenu(trigger, function (submenu, done) {
(0, _animation.slideToggle)(submenu, function () {
var toFocus = submenu.querySelector('[role="menuitem"][tabindex="0"]');
toFocus = toFocus || submenu.querySelector('[role="menuitem"]');
done(false, toFocus);
}, 300);
});
} else {
var link = trigger.querySelector('a');
if (link) {
link.click();
}
}
});
Suggested solution: do not stop the propagation of the event if there are no submenu items or anchor. A custom class/property could be a simple implementation has-submenu-or-anchor="false" defaulting to true.
Jacob Roman commented
Good catch @cyono-deque. This should be taken care once #102 is merged 🙌 A release should soon follow
Jacob Roman commented
#102 Closes this issue.