Preventing default key event behaviours for menu

[roomman]

Hi all, thanks for this add-on. It's been great to see this develop and to learn some of the newer ways of developing with Ember.

Just a quick question on the keyboard events for <Menu>. Is there a rationale for not preventing the default behaviour for the up and down arrow events? They are causing some jerky scrolling, when the containing element has a height greater than the viewport.

The following additions resolve it for me, but I'm unclear if this creates new issues in terms of accessibility? Can't see anything in the w3 docs to suggest it would.

  @action
  onKeydown(event) {
    switch (event.key) {
      // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
      case 'Enter':
        if (this.args.activeItem) {
          this.args.activeItem.element.click();
        }
        this.args.closeMenu();
        break;
      case 'ArrowDown':
+     event.preventDefault();
        return this.args.goToNextItem();
      case 'ArrowUp':
+     event.preventDefault();
        return this.args.goToPreviousItem();
      default:
        if (event.key.length === 1) {
          return this.args.search(event.key);
        }
    }
  }

Would you accept a PR to handle these events?

[roomman]

Just checked the React edition of headlessui and their Menu component has preventDefault and stopPropagation. 👍🏻

[alexlafroscia]

This is definitely a bug in our implementation; I've noticed the same problem in our app that uses Menu. I don't think it would be a problem to prevent these events' default behavior; I think it's what we should be doing!