UX issue: dropdown not opening when tabbing through form

Feature Requests
1

Hi! I have a small UX request regarding form navigation. When users fill out a form and press Tab to move to a field with a dropdown, the dropdown doesn’t open automatically. You have to click the field with the mouse to see the options, and that breaks the flow and creates a noticeably weaker UX

I hope this can be prioritized, since smoother keyboard navigation makes a big difference in everyday use :blush:

2

Quickfix with custom code:

<script>
  window.addEventListener('load', function () {
    document.addEventListener('focusin', function (event) {
      const target = event.target;

      if (!target.matches('input[role="combobox"][aria-controls^="downshift-"]')) return;

      const isExpanded = target.getAttribute('aria-expanded') === 'true';
      if (isExpanded) return;

      setTimeout(function () {
        const stillFocused = document.activeElement === target;
        if (!stillFocused) return;

        const keydown = new KeyboardEvent('keydown', {
          key: 'ArrowDown',
          code: 'ArrowDown',
          bubbles: true,
        });

        const keyup = new KeyboardEvent('keyup', {
          key: 'ArrowDown',
          code: 'ArrowDown',
          bubbles: true,
        });

        target.dispatchEvent(keydown);
        target.dispatchEvent(keyup);
      }, 0);
    });
  });
</script>
1 Like