Page MenuHomePhabricator

First space in selector disappears
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

  • as you type the space, it is ignored

What should have happened instead?:

  • space should not be ignored

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

You can also test this on the Codex docs site with the Lookup demo with fetched results.

Event Timeline

I believe this is due to the implemented functionality of the Codex Lookup.vue component [1]. For accessibility, the space bar will open the the dropdown menu if it is not already open, otherwise it will act as a regular space bar. This means when you try to add a space in your text in the short time between beginning to type and results populating the dropdown, the space bar won't add a space into the text, but will open the menu.

I am going to raise this with the Codex team and see if it's something they think should be updated.

[1] https://gerrit.wikimedia.org/g/design/codex/+/8e1ca4ba6216abe2d3156f65582a371adb535c73/packages/codex/src/components/lookup/Lookup.vue#268

Thanks for flagging this, @Ddwaal-WMF!

Originally, we wanted the user to be able to use the space key to toggle the menu open/closed, which is the default behavior of the Codex Menu component. However, with Lookup, this is really only useful when this scenario happens:

  1. User types something and the menu expands to show results
  2. User hits esc to close the menu
  3. User hits space to open the menu

This is a pretty unlikely scenario, and there are other ways to reopen the menu (enter, up or down arrow key, removing focus from the input then refocusing). So I wonder if we need this behavior at all for Lookup. I reviewed the WAI ARIA authoring practices guide and didn't see anything about the space key being required for toggling the menu, and it looks like the OOUI LookupElement does not support this behavior. @Volker_E / @Sarai-WMDE, do you think it's acceptable for us to remove the space bar functionality for Lookup? This would mean that the space key would always just add a space in the input.

Otherwise, we will need to add more logic to the onKeydown handler in the Lookup component to handle the bug that's happening there (the no-results slot is provided, the user types a space, and the menu hasn't opened yet).

Change 865704 had a related patch set uploaded (by Dani DW; author: Dani DW):

[design/codex@main] Lookup: bug fix

https://gerrit.wikimedia.org/r/865704

I have created the above patch if we are happy to move forward with the space bar not opening the menu.
If it's preferred to go the other route of additional logic to handle the edge case, I can update the patch.

The Design Systems Team discussed this together and decided that it's okay to remove the space key functionality from Lookup (and TypeaheadSearch, but that can be done separately). We'll open a separate task to more carefully review the proposal of removing this functionality from all components with a menu.

Change 865704 merged by jenkins-bot:

[design/codex@main] Lookup: Prevent the spacebar from opening the lookup dropdown menu, but only ever having the default behavior of adding a space character.

https://gerrit.wikimedia.org/r/865704

HouseBlaster renamed this task from FIrst space in selector disappears to First space in selector disappears.Dec 9 2022, 2:05 PM

Change 867727 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.4.0 to v0.4.1

https://gerrit.wikimedia.org/r/867727

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/cb9ffaffec/w

Change 867727 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.4.0 to v0.4.2

https://gerrit.wikimedia.org/r/867727

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/cb9ffaffec/w/