GlTokenSelector: Allow Escape key propagation when dropdown is closed

Manish Kumarrequested to merge
manishpatel00/design.gitlab.com:3762-token-selector-escape-propagation into main

What does this MR do?

In GlTokenSelector, @keydown.stop="$emit('keydown', $event)" was previously attached directly to the text input element, stopping propagation for all keydown events.

When GlTokenSelector is placed inside a modal (such as GlModal), pressing Escape from the input never propagates to the modal container or document, preventing the modal from closing. This breaks WCAG 2.1.1 (Keyboard navigation) and violates expected modal dialog keyboard behavior.

This change:

  1. Replaces @keydown.stop on the input with @keydown="handleKeydown" to control propagation programmatically.
  2. In handleEscape, stops Escape propagation (event?.stopPropagation?.()) only when the suggestions dropdown is open (dropdownIsOpen === true), so that the first Escape closes the suggestions dropdown.
  3. Allows Escape to propagate to parent DOM containers (including GlModal) when the suggestions dropdown is closed (dropdownIsOpen === false), enabling the modal to close on Escape.
  4. Keeps event.stopPropagation() for all non-Escape keys in handleKeydown, preserving existing behavior.
  5. Adds unit tests in token_selector.spec.js asserting that stopPropagation() is called when the dropdown is open, and not called when the dropdown is closed.

Closes #3762

Related to gitlab-org/gitlab!269355

Does this MR meet the acceptance criteria?

  • Relevant labels applied
  • Changeset added (.changeset/token-selector-escape-propagation.md)
  • All unit tests passing (token_selector.spec.js)
  • Meets WCAG 2.1.1 keyboard navigation criteria

Merge request reports