Autocomplete keyboard controls assume users are using QWERTY keyboards

Description

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.)

Notes
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.

Activity

Show:
Sarken
April 4, 2019, 10:21 PM

Credit: Alix, she/her

Sarken
April 5, 2019, 7:37 AM

I switched my Mac’s language over to Russian, which has the letter б on the same key as the QWERTY comma. The Russian comma, meanwhile, is on the 6 key… if you press shift.

So, anyway, I typed брат, into an autocomplete field and it didn’t finalize the entry until I pressed Shift+6 to enter the comma.

Looks great!

Nerine Luna Cyran
April 5, 2019, 9:43 AM

I switched my Window’s language over to French/AZERTY, which has the comma on the same key as the QWERTY m key. On the place of the QWERTY comma is the ; key.

On one of my own works, I edited the tags, and typed “Harry Potter” followed by a comma into the Character tag field. It finalized the entry when I pressed the comma key. When I typed in “Harry Potter;”, the entry wasn’t finalized.

Seems to work!

redsummernight
April 5, 2019, 9:55 PM

Adi M. confirmed that this is fixed for a Hebrew keyboard.

Lady Oscar
April 10, 2019, 5:43 AM

Looks good!

DeployedToBeta

Assignee

Alix R

Reporter

Sarken

Roadmap

Internationalization
Misc

Priority

High

Affects versions

Fix versions

Components

FrontEnd

Difficulty

Medium

Milestone

Internal 0.9
Configure