Adds prevent modifier to keydown enter event handler on KDropdownMenu

[AlexVelezLl]

Description

Adds .prevent modifier to the @keydown.enter event handler on UiMenu. This is needed because when a dropdown menu item opens a new screen/modal that grabs the focus into a button, the button's @click event is also triggered.

The reason the focus on the button triggers automatically on focus is that when it is focused, the key press is still active, and given that browsers interpret button elements' enter keydown as click, it triggers its @click event. This doesn't happen, though, when we change the focus from one button to another, because this click interpretation only happens once in a given time lapse, and if it has already interpreted a click on a button, it ignores the keydown event when the second button is focused, but the problem is that these menu items are li elements.

Also tried to change @keydown to @keyup but this led to a conflict with the key press event on the button that opens the dropdown, because this button reacts to the keydown event of the enter key press, opens the menu, and on key up, the handler of the first menu option was triggered for the same key press.

Issue addressed

Will solve a bug found on learningequality/studio#5668.

Changelog

• Description: Fixes a bug where pressing the Enter key on a KDropdownMenu item could inadvertently trigger click events on elements that received focus immediately after that.
• Products impact: bugfix.
• Addresses: -.
• Components: KDropdownMenu.
• Breaking: no
• Impacts a11y: no
• Guidance: -.

Steps to test

I have tested this using this playground:

<template>

  <div style="padding: 24px">
    <li
      ref="button1"
      tabindex="0"
      @keydown.enter="$refs.button2.focus()"
      @focus="() => buttonFocused('button1')"
    >
      li with @keydown.enter handler to focus 'button'
    </li>
    <button
      ref="button2"
      @click="$refs.button1.focus()"
      @focus="() => buttonFocused('button2')"
    >
      Button to focus li
    </button>
  </div>

</template>


<script>

  export default {
    name: 'Playground',
    data() {
      return {};
    },
    methods: {
      buttonFocused(buttonRef) {
        console.log(`${buttonRef} focused`);
      }
    }
  };

</script>