Skip to content

[EuiComboBox] Only delete the last selected pill when pressing the backspace key when the input caret is present#6699

Merged
cee-chen merged 3 commits intoelastic:mainfrom
cee-chen:combobox/backspace-fix
Apr 7, 2023
Merged

[EuiComboBox] Only delete the last selected pill when pressing the backspace key when the input caret is present#6699
cee-chen merged 3 commits intoelastic:mainfrom
cee-chen:combobox/backspace-fix

Conversation

@cee-chen
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen commented Apr 6, 2023 •
edited
Loading

Summary

closes #590

What this PR does:

  • Prevents backspace keypresses on the clear button from triggering the last pill deletion
  • Prevents backspace keypresses on when other pills are focused from triggering the last pill deletion

What this PR does not do:

  • Allow backspace keypresses on pills to delete the pill that's currently focused (I agree with @1Copenut who mentioned in a meeting that that behavior felt unintuitive, and would require extra SR instructions to tell people it's even an option. We can potentially revisit this in the future if it becomes a feature request, but I don't see it as necessary for now)

QA

  • Go to https://eui.elastic.co/pr_6699/#/forms/combo-box (first demo)
  • Using your keyboard, tab to the X button of the already selected Mimas or Iapetus pills
  • Press your backspace key and confirm nothing happens
  • Tab to the input and press backspace
  • Confirm the Iapetus pill is deleted correctly
  • Tab to the clear button and press backspace
  • Confirm nothing happens and the Mimas pill remains as-is

General checklist

  • Added or updated **jest and cypress tests**
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

cee-chen added 2 commits April 6, 2023 12:40
@cee-chen
Remove backspace keydown on entire combobox
9c51a61 
- it should be firing only on the input, and not (e.g.) on the clear button or on individual pills
@cee-chen
Write Cypress E2E tests for backspace behavior
054407d 
+ fix `data-test-subj` that was causing an extra space and a failed selector get
@cee-chen cee-chen requested a review from 1Copenut April 6, 2023 19:52
@cee-chen
Copy link
Copy Markdown
Contributor Author

cee-chen commented Apr 6, 2023

@1Copenut Probably out of scope for this PR, but I noticed that pressing "Enter" on the pill X buttons and the clear X buttons doesn't work (but space does...) which I find incredibly annoying (normally both enter and space work for all buttons). Is this something we should resolve in a separate PR, you think?

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Apr 6, 2023

Preview documentation changes for this PR: https://eui.elastic.co/pr_6699/

@1Copenut
Copy link
Copy Markdown
Contributor

1Copenut commented Apr 6, 2023

Is this something we should resolve in a separate PR, you think?

I agree with you the Enter key should be listening where these are buttons. Also think yes, this fix is out of scope for the work on your current PR.

1Copenut
1Copenut approved these changes Apr 6, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 This was a fun feature to test. I ran it through Safari + VO and Chrome and Firefox + NVDA. VO doesn't do the best job announcing the listbox items (not new) but it announced the newly selected item and updated the backspace to delete text perfectly. NVDA was an even better experience.

Good to go. Thank you @cee-chen !

@cee-chen cee-chen merged commit a57fbda into elastic:main Apr 7, 2023
@cee-chen cee-chen deleted the combobox/backspace-fix branch April 7, 2023 02:18
@breehall breehall mentioned this pull request Apr 12, 2023
Merged
jbudz added a commit to elastic/kibana that referenced this pull request Apr 18, 2023
@breehall @kibanamachine @jbudz
Upgrade EUI to v77.1.1 (#154838)
3259647 
EUI `77.0.0` ➡️ `77.1.1`

## [`77.1.0`](https://github.com/elastic/eui/tree/v77.1.0)

- Updated `EuiDatePicker` to display a warning icon and correctly set
`aria-invalid` when `isInvalid` is passed
([#6677](elastic/eui#6677))
- Updated `EuiFilePicker` to display an alert icon when `isInvalid`
([#6678](elastic/eui#6678))
- Updated `EuiTextArea` to display an alert icon when `isInvalid`
([#6679](elastic/eui#6679))
- Updated `EuiTextArea` to support the `isLoading` prop
([#6679](elastic/eui#6679))
- Updated `EuiComboBox` to display a warning icon and correctly set
`aria-invalid` when `isInvalid` is passed
([#6680](elastic/eui#6680))

**Bug fixes**

- Fixed `EuiAccordion` to not set an `aria-expanded` attribute on
non-interactive `buttonElement`s
([#6694](elastic/eui#6694))
- Fixed an `EuiPopoverFooter` bug causing nested popovers within
popovers (note: not a recommended use-case) to unintentionally override
its panel padding size inherited from context
([#6698](elastic/eui#6698))
- Fixed `EuiComboBox` to only delete the last selected item on backspace
if the input caret is present
([#6699](elastic/eui#6699))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Jon <jon@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@1Copenut 1Copenut 1Copenut approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[EuiComboBox] Pill traversal and safer deletion interaction

3 participants

@cee-chen @kibanamachine @1Copenut