Selectize.js: Single item 'edit selection' UX

[stevelacey]

The way the input representing the selected item is slotted into where the filter text box was placed, and hitting backspace removes the whole item, works great in multiple select dropdowns, as there's the scope for further selections.

However, if you just want a single select dropdown, as per regular dropdowns, but with some autocomplete, the experience is a bit jarring. The way the user has to hit backspace to clear their selection and cannot simply edit what they've typed so far e.g. by clicking where they want to edit in the string is a bit counter intuitive in my opinion.

I have experimented with implementing the functionality I expect using the restore_on_backspace plugin, and triggering a backspace keystroke when they focus the area, as well as some other ideas I had, but the approaches all had caveats such as:

• clearing the selection entirely if the user focused and then blurred
• still not allowing them to go to a particular point in the string based on where they clicked

I am thinking this needs to not be so hard, and that this should be the default functionality on single select, the reason this is like this is to cater for the concept of multiple item selection, which simply isn't a problem here, slotting the 'selected' input in place doesn't add any value, unless you want to style it like they are in multi-selects, which I doubt anyone does.

What I would expect is for the input that represents the selection to always remain hidden, and for the autocomplete simply to 'complete' the filter text box– or for that functionality to at least be available in an option. Thoughts?

[brianreavis]

Yeah, I'm with you – it's not ideal. What do you think about https://github.com/brianreavis/selectize.js/issues/647?

[stevelacey]

@brianreavis I think #647 might address all of my requirements, not being able to edit existing selections is acceptable if it's clear it's a placeholder, and you don't need to backspace to clear it.

[yuanda]

I'm with @stevelacey. The #647 still can't allow user to edit the selection in 'edit' mode, for example, user selected '12345678' at first, then user would like to search for '12345679', so currently if user hit 'Backspace' in the selection box, it will clear the whole selection, what I wish is when I hit the selection box, and hit 'Backspace', it will delete the last digit, which becomes '1234567', then instead of retyping the whole search term, I can then just add the last digit at the end.

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.