simple-svelte-autocomplete icon indicating copy to clipboard operation
simple-svelte-autocomplete copied to clipboard

Unselect item when backspace is hit

Open azmeuk opened this issue 3 years ago • 3 comments

I suggest to add an option that unselects the selectedItem when backspace is hit.

azmeuk avatar Jul 13 '21 08:07 azmeuk

I like the idea, but in general back space is used to remove the last typed character. This would make sense only in locked mode?

pstanoev avatar Jul 15 '21 17:07 pstanoev

I agree that there needs to be a way to get back into the "nothing is selected" state using a keyboard. A keyboard equivalent to hitting the "X". But maybe ESC is better suited? If you hit it and the dropdown is already closed it should clear the selection (so hitting ESC twice will always clear it). An else here https://github.com/pstanoev/simple-svelte-autocomplete/blob/92189fa3f72a52a74f4d03572d5c2095c4c58873/src/SimpleAutocomplete.svelte#L714-L717. ENTER could also work. Hitting enter with an empty input? Trying this currently doesn't work, it will just close the dropdown and leave the selected item but with an empty input. But ENTER means confirm and I try to confirm an empty input. So don't selectItem when the dropdown is closed https://github.com/pstanoev/simple-svelte-autocomplete/blob/92189fa3f72a52a74f4d03572d5c2095c4c58873/src/SimpleAutocomplete.svelte#L664-L666

I don't think backspace is a common pattern for this use case. We should just see how other autocomplete implementations usually handle this.

  1. https://material-ui.com/components/autocomplete/ Just making the input empty will instantly clear the selection, e.g. even using "right click -> cut" or DEL
  2. I'm having a hard time finding demos that actually render the state so I can see what's happening. Not interested in setting up all of them.

Prinzhorn avatar Aug 26 '21 14:08 Prinzhorn

Currently ESC does nothing when the dropdown is already closed. For a Chrome user at least this is unexpected ux, because the X on the right makes it look like a <input type="search" />. And in Chrome hitting ESC clears that.

Prinzhorn avatar Aug 26 '21 14:08 Prinzhorn