fractaledmind
commented
1 year ago The best I have ever read on the select-multiple combobox pattern is this two-part series from Sarah Higley: https://sarahmhigley.com/writing/select-your-poison/
The exploration, user testing, and final recommendations directly inspired my take on this pattern: https://codepen.io/smargh/pen/jOGZwKW
Most importantly, IMO, is the user feedback that the StackOverflow-like approach that puts the "tags" inside the input is harder to work with, since the typeable area is always moving and shifting.
joemasilotti
phil-6
MiaSinek
Developer specialties is live (behind a feature flag) but the UX isn't great. And definitely won't scale. The second image is only about half of what is actually there!
I'd like to change these two input fields to typeahead comboboxes. Stack Overflow's "tags" feature is a great baseline to model this after.
When you start typing you see a bunch of results. Clicking one adds it to the input field with an X. Clicking the X removes that tag.
I've already built out some of this in the combobox branch. When you render the partial you get typeahead search powered by Hotwire - the only custom JavaScript is to progressively enhance the form with autocomplete and hide some browser validations.
The inputs should be progressively enhanced and continue to work if someone doesn't have JavaScript enabled. This probably means rendering the existing checkboxes then hiding them in a Stimulus controller to show the combobox.
Ideally, whatever is built can be reused for the location search as well. If possible, please build these components with that idea in mind.
Please note that I don't have a ton of experience with building dynamic inputs like this. I will probably push back on every line of custom JavaScript you write! So I'm looking for someone who has done this before and can teach me how best to build this.
I've tripled the bounty ($75) to reflect that. Thanks!