Close fly-out menu when user tabs away from menu using JavaScript

Question

I have a fly-out menu on my website, that closes when the user clicks away (anywhere else on the page) using an event listener. I would like to do the same but for accessible user for when they tab away from the fly-out menu. Any help doing this would be appreciated.

configure() {
    window.addEventListener('resize', debounce(this.resize.bind(this), 300));
    window.addEventListener('blur', () => once(window, 'focus', this.resize.bind(this)));

    this.more_btn.addEventListener('click', () => {
      if (this.more_list.classList.contains('hidden')) {
        setTimeout(() => {
          once(window, 'click', () => {
            this.container.classList.remove('opened');
            this.more_list.classList.add('hidden');
            toggleAria(this.more_list, 'aria-expanded');
          });
        }, 100);
      }

      this.container.classList.toggle('opened');
      this.more_list.classList.toggle('hidden');
      toggleAria(this.more_list, 'aria-expanded');
    });


    this.dropdown.addEventListener('click', () => {
      this.toggle();
    });

    this.resize();
  }

score 0 · Answer 1 · answered Jun 17 '19 at 05:22

you can bind the eventlistener to keyup.

document.addEventListener('keyup', function(event) {
    if (event.keyCode == 9) {
     // close your menu
    }
});

as stated in your question, close menu only when user "tab-away", bind the listener to the menu.

document.getElementById("your_menu_selector").document.addEventListener('keyup', function(event) {...}

your question has already an answer here: How to call function when I press tab key in javascript?

Close fly-out menu when user tabs away from menu using JavaScript

1 Answers1