Make WordPress Core

Opened 4 days ago

Last modified 3 days ago

#64923 new defect (bug)

command palette input doesn't allow some keys

Reported by: presskopp's profile Presskopp Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: ui, accessibility Cc:

Description

In the input field of the command palette ("Search commands and settings") keys like 'ArrowDown', 'ArrowUp', 'Home', 'End' are restricted, why?

See commands.js, ~L. 3150

case "ArrowDown": {
  ie(e);
  break;
}
...
case "ArrowUp": {
  se(e);
  break;
}
case "Home": {
  e.preventDefault(), X2(0);
  break;
}
case "End": {
  e.preventDefault(), oe();
  break;
}

can we set them free?

Change History (6)

#1 @abcd95
4 days ago

I see this behavior too, in command palette search, Home/End, and arrow keys are being captured by palette navigation, so native input caret behavior is limited.

This looks partly intentional for result navigation, but likely too aggressive in the textbox context. I think we should further discuss this on expected key ownership (input vs list) before patching. Also, can address this here for a proper discussion.

#3 @wildworks
4 days ago

  • Component changed from Toolbar to Editor

@Presskopp Thanks for the report, but can you clarify what the actual problem is and what the ideal behavior should be?

See commands.js, ~L. 3150

This code likely doesn't exist within WordPress or Gutenberg itself, but rather in the cmdk library that the command palette depends on.

https://github.com/dip/cmdk/blob/dd2250ed608443e8f32bafc5fa2d1d07a3746aa3/cmdk/src/index.tsx#L592-L637

#4 @Presskopp
3 days ago

To clarify:

The Home/End keys should take me to the beginning/end of the string in the input field, or to make it short:
The input field should behave like any other usual input field, as long as it has focus.

quoting
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list

An HTML input with type="text" is used for the textbox so the browser will provide platform-specific editing keys.

quoting
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

When a descendant of a listbox, grid, or tree popup is focused, DOM focus remains on the combobox and the combobox has aria-activedescendant set to a value that refers to the focused element within the popup.

#6 @wildworks
3 days ago

Thanks for clarifying the problem. This issue seems to need fixing upstream. I'm not sure if we can override that behavior in the @wordpress/commands package.

Note: See TracTickets for help on using tickets.