dequelabs / pattern-library

Deque pattern library

Home Page:https://pattern-library.dequelabs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Menu submenu trigger swallowing click propagation

cyono opened this issue · comments

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.

Good catch @cyono-deque. This should be taken care once #102 is merged 🙌 A release should soon follow

#102 Closes this issue.