How to trigger a (stimulus) action after selecting an entry?

[randomsnowflake]

I want to replace the current Rails form helper:

            <%= form.collection_select :tx_category_id,
                                 tx_categories,
                                 :id, :name,
                                 { selected: tx.tx_category_id, prompt: "Kategorie auswählen" },
                                 class: "form-control",
                                 data: { action: "input->search-form#search" } %>

... with the equivalent Hotwire Combobox:

      <%= form.combobox :tx_category_id,
                        tx_categories,
                        selected: tx.tx_category_id,
                        prompt: "Kategorie auswählen",
                        class: "form-control" %>

While the code works I have not yet found a way to trigger my stimulus action (input->search-form#search) after an entry was selected.

How to integrate frontend interactivity?

[enowmbi]

I'm having the same issue. The documentation should include a list of events that the combo box can trigger and a list of all the properties.

[vlado]

I was able to do that by adding action to parent controller element

<div data-controller="other-controller" data-action="hw-combobox:selection->other-controller#someAction" ...

See https://stimulus.hotwired.dev/reference/controllers#cross-controller-coordination-with-events for more info

Following should also work

parentElement.addEventListener("hw-combobox:selection", (event) => ...)

You can find other events in https://github.com/josefarias/hotwire_combobox/blob/main/app/assets/javascripts/hw_combobox/models/combobox/events.js

[vfonic]

Here's how I managed to get it working with @stimulus-components/auto-submit (the form submits on selection, making it great for instant filtering or multi-step form):

builder.combobox(input_name, path, value:, options:) do |combobox|
  combobox.customize_fieldset(data: { action: "hw-combobox:selection->auto-submit#submit" })
end

Unrelated: In order to have the record title shown in the async combobox on page load, I use:

options = HotwireCombobox::Listbox::Item.collection_for(
  template, [record], render_in: {}, include_blank: nil, display: :to_combobox_display
)

Please let me know if there's simpler way to achieve this.

The only thing I'd prefer for this solution would be for combobox to submit on clear/"X" pressed. But instead, it clears the hidden field value and opens the combobox. It dispatches hw-combobox:selection only on focus lost or when other element is selected. Is there a way to achieve this: clear on "X", without opening combobox?

---

@vlado how/where did you add data-action to the parent element?

Another solution that kind-of worked (with clearing on "X" as well) was by adding:

this.hiddenFieldTarget.dispatchEvent(new Event("change"));

below here:

hotwire_combobox/app/assets/javascripts/hw_combobox/models/combobox/form_field.js

Line 50 in c280da0

this.hiddenFieldTarget.value = value

And:

builder.combobox(input_name, path, value: current_value, options:) do |combobox|
  combobox.customize_hidden_field(data: { action: "change->auto-submit#submit" })
end

When clearing the currently selected item by pressing "X", the input gets cleared immediately, change->auto-submit#submit fires, and combobox opens...and then it closes (gets rendered as closed when the auto-submit turbo frame updates the DOM).

@josefarias what do you think: should changing hidden field value fire DOM or Custom events? Or how would you recommend I solve this or just leave it as-is without immediately submitting on clear/"X"?

[vlado]

@vlado how/where did you add data-action to the parent element?

@vfonic great question 👍 I see now that my answer is a bit confusing. In my case I've added it to the parent receiving controller element as described in https://stimulus.hotwired.dev/reference/controllers#cross-controller-coordination-with-events (see updated answer above).