eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiComboBox] Broken keyboard interaction in `x` clear button

Open nickofthyme opened this issue 2 years ago • 4 comments

Describe the bug

Unable to access clear button on EuiComboBox from keyboard navigation.

Screen Recording 2023-10-16 at 07 14 26 PM

  1. Go to https://eui.elastic.co/#/forms/combo-box
  2. Click to focus and open any clearable comboBox
  3. Make a selection so the input is filled
  4. Press esc to close list and tab to the x clear button
  5. Press enter to clear the selection
  6. Notice nothing happens

Clicking the x has the intended affect just not via keyboard interaction.

nickofthyme avatar Oct 17 '23 02:10 nickofthyme

Just to add context -- using the space does work to trigger the x button as expected. Maybe that's the intended use. I'm not sure when or where space vs enter should be used but from this link it seems it would be better if both space & enter triggered the button.

image

nickofthyme avatar Oct 17 '23 16:10 nickofthyme

+1, can confirm/repro the problem. FWIW, we've solved this problem in EuiSelectable (https://github.com/elastic/eui/pull/6631), so this bug will go away for free once we update EuiComboBox to dogfood EuiSelectable (https://github.com/elastic/eui/issues/2841).

The latter is on my list for the next month or so, so I'm tempted to wait until then to try and fix this issue.

cee-chen avatar Oct 17 '23 22:10 cee-chen

In the showcase https://eui.elastic.co/#/forms/combo-box, space triggers the clear and not enter.

hrmtn avatar Dec 28 '23 14:12 hrmtn

@hrmtn correct that's what I stated in https://github.com/elastic/eui/issues/7289#issuecomment-1766721228, the question is whether it should trigger using either space or enter not only space.

nickofthyme avatar Jan 04 '24 19:01 nickofthyme