Feature Request: Frame or slot for injecting "New" and "No results" templates

[Michoels]

First off, thanks for the great lib!

In a current project, I'm trying to recreate this bit of UI from the Stripe "New Invoice" form:

Above the list of autocomplete options, there's an area where additional content can be injected. In this case, they use it to inject a "Add new customer" button.

In HotwireCombobox, it would be great if there was some way to inject content above the _paginated_listbox. There are numerous cases where this could be useful. Maybe using something similar to the ViewComponent slots API?

It might also be helpful to add an additional injectable area that's shown when there are no matching search results. It would be great to be able to show a customizable message or partial of some sort.

Thanks!

[josefarias]

Hey! Thanks for the request.

I had initially avoided the "add new option" button to sidestep the complexity of what would happen if you click on it.

For example, does it add the option to the listbox? Is that option suddenly searchable alongside existing options? If you have multiple comboboxes, does it appear in all of them?

If the answer is yes to any of those questions, that'd complicate the code quite a bit. Specially for async comboboxes or HTML ones. Not a fan.

As I'm reading this I thought of a possible simplification.

Maybe it's just a placebo button. A way to communicate to the user that new options are accepted.

Clicking on it would remember your current value and not show the "add new option" anymore for that value until you click it for a different value.

Here's the catch: it does nothing. The new value would've been submitted even if you didn't press it. But I actually think that's fine, as the combobox has been configured to accept new values anyway.

I don't think we'll add a way to inject just anything into the listbox. Rather, we'd implement the "add new option" button and the "no results" state as two configurable, separate, params – as they both have logic associated with them. Kind of in-line with your slots idea.

I have no remarks about the "no results" state. Just that we should implement it.

What does everyone think?

[josefarias]

To be clear, in my comment above I'm strictly thinking about single values or entries in the combobox.

Stripe's example presumably links to a new customer creation flow. That'd be out of scope for this library. Too specific of a use case.

[edwinv]

We are heavily using the "Add new" option in comboboxes in our application. The option is added based on a parameter add_item_path. When the user selects the "Add new" option, the user is redirected to the specific form to add this new item. We can't handle this within the combobox due to the number of required fields. We are doing a full page reset, but the page could also reply with a Turbo stream response with a dialog element.

After the user has submitted the new item, we redirect the user back based on our general "redirect back" logic. The id of the newly added item is added to the params, so we can preselect the item in the combobox.

Maybe the combobox should steer away from having logic about how to add the item to the combobox and just rely on a path being called that handles everything through Hotwire features like streams and morphs?

[josefarias]

Thanks @edwinv. I think it can be much simpler than that.

I'm thinking this would be for single values (i.e. strings). Which is already supported, hence my reference to a placebo.

The library wouldn't attach any special logic to selecting the new option. It would just let you know via the existing custom events that an option was selected, and that it's new (which also already happens). Up to you if you'd like to hook into that behavior and conditionally autosubmit and redirect, for example.

[josefarias]

I'm thinking this wouldn't be a button that's always displayed. It would only appear after typing a new string that isn't already a recognized option.

So Stripe would have no use for this for example.

Linking to a new flow can either be done by redirecting as described above, or by linking to the new flow outside of the combobox – completely independent of the library.

[josefarias]

Let's continue this conversation here: https://github.com/josefarias/hotwire_combobox/discussions/15