Dropdown doesn't hide after tabbing to next menu element

[craigs100]

Resource URL

https://www.w3.org/WAI/tutorials/menus/flyout/

Description

Approach 2:Use button as toggle

The code examples you provide do not show how the dropdown is hidden once you've tabbed away from it. I can get it to show and hide when clicking the arrow icon, but once you tab down the submenu times and onto the next menu item, yours hides, mine doesn't. I'm using the same code as you've shown.

Please either explain or modify the code.

Thanks.

Resource Shortname

wai-tutorials

[heybran]

Hi @craigs100,

It seems like there is more codes being applied to the menu then the ones shown in the tutorial. To close the dropdown when you tab out of the dropdown links, you would need to add a blur event listener to the links, something like this.

var menuItems = document.querySelectorAll("li.has-submenu");
Array.prototype.forEach.call(menuItems, function (el, i) {
  var activatingA = el.querySelector("a");
  var btn =
    '<button><span><span class="visuallyhidden">show submenu for “' +
    activatingA.text +
    "”</span></span></button>";
  activatingA.insertAdjacentHTML("afterend", btn);

  el.querySelector("button").addEventListener("click", function (event) {
    if (this.parentNode.className == "has-submenu") {
      this.parentNode.className = "has-submenu open";
      this.parentNode.querySelector("a").setAttribute("aria-expanded", "true");
      this.parentNode
        .querySelector("button")
        .setAttribute("aria-expanded", "true");
    } else {
      this.parentNode.className = "has-submenu";
      this.parentNode.querySelector("a").setAttribute("aria-expanded", "false");
      this.parentNode
        .querySelector("button")
        .setAttribute("aria-expanded", "false");
    }
    event.preventDefault();
  });

  const submenuLinks = el.querySelectorAll("ul li a");
  if (submenuLinks.length === 0) {
    return;
  }

  submenuLinks.forEach((a) => {
    // Add a blur event listener on the sub menu link.
    a.addEventListener("blur", function (event) {
      const timeout = setTimeout(function () {
        if (
          el.classList.contains("open") &&
          a.closest("ul").matches(":not(:focus-within)")
        ) {
          el.classList.remove("open");
          el.querySelector("a").setAttribute("aria-expanded", "false");
          el.querySelector("button").setAttribute("aria-expanded", "false");
        }
      }, 10);
    });
  });
});

I also created a CodePen to show it works. Free free to check it out: https://codepen.io/brandonzhang/pen/JjgVqgW

And @remibetin I think we should maybe update the original English tutorial: https://www.w3.org/WAI/tutorials/menus/flyout/?