joemasilotti
Progressively enhanced combobox for developer specialties
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!
| Developer form | Developer search |
|---|---|
 |
 |
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!
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.
That's a great point regarding inside vs. outside. Thanks for sharing @fractaledmind!
Do you have any interest in working on this issue? If not, no worries. :)
Just adding this here (following our Twitter chat) as it might be helpful for whoever picks up this feature.
https://purpleriver.dev/posts/2023/search-and-select-hotwire
Excellent! All yours @MiaSinek.
Let me know if have questions. I feel like there are a lot of product edge-cases that might come up with this one. If I don't hear from you in a week or so I'll reach back out.