Uploaded image for project: 'Archive of Our Own'
  1. AO3-5315

Autocomplete keyboard controls assume users are using QWERTY keyboards


    • Type: Bug
    • Status: Deployed
    • Priority: High
    • Resolution: DeployedToBeta
    • Affects versions: 0.9.210
    • Fix versions: 0.9.245
    • Milestone:
      Internal 0.9
    • Difficulty:
    • Roadmap:
      Internationalization, Misc
    • Components:


      Steps to reproduce
      Using a keyboard with a layout that does not have the comma key in the same position as this diagram of a QWERTY keyboard

      1. Log in
      2. Post > New Work
      3. In an autocomplete field like Additional Tags, do one of the following:
        1. enter some text and press the comma key on your keyboard
        2. enter some text that uses the key in the same position as the QWERTY keyboard's comma key (e.g. ת on a Hebrew keyboard)

      What happens
      If you press the comma key on your non-QWERTY keyboard, a comma appears in the field and nothing else happens. You'd expect it to finalize the entry of the tag, making it appear over the field the same way pressing the comma key on a QWERTY keyboard does.

      If you press the key that's in the same position as a QWERTY keyboard's comma, it finalizes entry of the tag, making it appear above the field. This effectively prevents you from using whatever letter/character is on that key. You'd expect to be able to use that letter/character normally. (If you're using a QWERTY keyboard, you can also see this behavior by trying to use the < character, which requires you to use the comma key in combination with the Shift key.)

      The autocomplete JavaScript uses the code attribute for all keyboard functionality. We probably need to considering using the key attribute instead, because we care about the character being inputted, not the physical key being pressed. KeyboardEvent.key has good support on new browsers, but it will likely break things for anyone using an unsupported browser.


          Issue links



              • Assignee:
                Alix R
              • Watchers:
                3 Start watching this issue


                • Created: