feat(GlTokenSelector): explicitly emit `keydown` event

What does this MR do?

If the GlTokenSelector component is used inside a form we want to preventDefault when the enter key is pressed to select a token so the form does not submit. This currently is possible because the keydown event bubbles, but it requires wrapping GlTokenSelector in another element. Also event.target.value will sometimes be empty because the text input value is cleared before the keydown event bubbles.

By explicitly emitting the keydown event we can listen for the event on the GlTokenSelector component and get the value of event.target.value.

Example

<script>
import { GlTokenSelector } from '@gitlab/ui';

export default {
  components: { GlTokenSelector },
  data() {
    return {
      selectedTokens: [],
    };
  },
  methods: {
    handleEnter(event) {
      // Prevent submitting the form if a token is being added
      if (event.target.value !== '') {
        event.preventDefault();
      }
    },
  },
};
</script>

<template>
  <gl-token-selector
    v-model="selectedTokens"
    allow-user-defined-tokens
    hide-dropdown-with-no-items
    @keydown.enter="handleEnter"
  />
</template>

Does this MR meet the acceptance criteria?

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• [-] If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• [-] If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• [-] If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • Customers Portal: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.