Select2 "change" event does not trigger htmx

Question

This works, the way I want it: If the <select> gets changed, then htmx gets triggered.

<script src="https://unpkg.com/[email protected]"></script>

<table>
 <tr hx-post="//example.com" hx-trigger="change">
  <td>
    <select name="runner">
     <option value="a">a</option>
     <option value="b">b</option>
    </select>
  </td>
 </tr>
</table>

If I use a django-autocomplete-light widget, then it does not work.

I use this version: django-autocomplete-light==3.8.1

Flora

can you add "select" as an hx-trigger as well as the change? – Solemn

Answer 1

If I add this JS, then it works. Better solutions are welcome.

<script>
 window.addEventListener("DOMContentLoaded", (e) => {
  $('select').on('select2:select', function (e) {
   $(this).closest('tr').get(0).dispatchEvent(new Event('change'));
});
 })
</script>

Flora

Answer 2

Just come across this same issue, and fixed it with the following modified version of guettli's answer.

window.addEventListener("DOMContentLoaded", (e) => {
    $('select').on('select2:select', function (e) {
        $(this).closest('select').get(0).dispatchEvent(new Event('change'));
    });
});

Tripetalous

I had to tigger the change event on the element with hx-trigger attribute. – Turbulence

Answer 3

For me it worked when also adding htmx.onLoad() using bootstrap 5 styled Select2 https://apalfrey.github.io/select2-bootstrap-5-theme/:

htmx.onLoad(() => {
   $("#collection-select").select2({
      theme: "bootstrap-5",
      closeOnSelect: true
   });
});
window.addEventListener("DOMContentLoaded", (e) => {
   $('select').on('select2:select', function (e) {
      $(this).closest('select').get(0).dispatchEvent(new Event('change'));
   });
});

Shurlock

Answer 4

What worked for me was to trigger the change event with the htmx javascript API trigger https://htmx.org/api/#trigger

window.addEventListener("DOMContentLoaded", (e) => {
  $('select').on('select2:select', function (e) {
    htmx.trigger($(this).closest('select').get(0), 'change')
  })
})

Mixer

Answer 5

Hey there person struggling to get a multiple select pillbox style to work. You have to listen to both select2:select and select2:unselect!

Hey there person struggling to listen to the change event from a parent component because your select isn't where your hx-trigger is. You have to make sure you fire the new change event with {bubbles: true}.

Cheers to you, friend!

$(doc).ready(function() {
  $("select").select2({placeholder: "Search..."});
  $("select").on("select2:select select2:unselect", (e) => {
    e.currentTarget.dispatchEvent(new Event("change", {bubbles: true}));
  });
});

DOM

<table>
 <tr hx-post="//example.com" hx-trigger="change">
  <td>
    <select name="runner[]" multiple="multiple">
     <option value="a">a</option>
     <option value="b">b</option>
    </select>
  </td>
 </tr>
</table>

Piet