Page MenuHomePhabricator

MenuTagMultiselectWidget: cannot tab away from field without selecting option from dropdown
Open, Needs TriagePublicBUG REPORT

Description

What is the problem?

When using the MenuTagMultiselectWidget, the tab key selects options that are highlighted in the dropdown.

This means if I am tabbing through form fields I can unintentionally select/deselect an option.

Where the dropdown shows the existing tags (like in the screenshot), I cannot find a way of tabbing past the widget without adding or removing a tag.

This makes it hard to use the form only with your keyboard.

EDIT I have worked out that I can press Esc to dismiss the dropdown, then tab away.

Steps to reproduce problem
  1. Go to https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#MenuTagMultiselectWidget-initially-selected-preset-options
  2. Try to tab past one of the MenuTagMultiselectWidget inputs without adding or removing a tag
Environment

Browser: Firefox 68 and Chromium 83

Screenshots (if applicable):

block_tabbing_removing_target_before_after.png (350×1 px, 29 KB)