Appending additional actions to pillTemplate

[joshRpowell]

With the following action applied to the wrapper <div data-action="change->search-form#search"... I'm able to trigger a search when checking/un-checking checkbox in the dropdown.

see html code

<div class="form-group select optional search_facility_status_ids col-md-12 search-form-bottom" data-controller="multiselect" data-placeholder="Search by status..." data-action="change->search-form#search" data-multiselect-items-value="[{&quot;value&quot;:1,&quot;text&quot;:&quot;Active&quot;},{&quot;value&quot;:2,&quot;text&quot;:&quot;Disposed&quot;},{&quot;value&quot;:3,&quot;text&quot;:&quot;Proposed&quot;},{&quot;value&quot;:4,&quot;text&quot;:&quot;Contracted&quot;},{&quot;value&quot;:5,&quot;text&quot;:&quot;Owned&quot;},{&quot;value&quot;:6,&quot;text&quot;:&quot;Deleted&quot;},{&quot;value&quot;:7,&quot;text&quot;:&quot;Pending&quot;}]" data-multiselect-selected-value="[{&quot;value&quot;:1,&quot;text&quot;:&quot;Active&quot;},{&quot;value&quot;:4,&quot;text&quot;:&quot;Contracted&quot;}]">
  <label class="control-label select optional" for="search_facility_status_ids">Facility Status</label>
  <input name="search[facility_status_ids][]" type="hidden" value="" autocomplete="off">
  <select class="form-control select optional multiselect__hidden" multiple="multiple" data-multiselect-target="hidden" name="search[facility_status_ids][]" id="search_facility_status_ids">
    <option value="1" selected="true">Active</option>
    <option value="4" selected="true">Contracted</option>
  </select>
  <div class="multiselect__container" data-multiselect-target="container" data-action="click->multiselect#toggleDropdown focus->multiselect#focusSearch" tabindex="0" data-turbo-cache="false">
    <div class="multiselect__preview" data-multiselect-target="preview">
      <div class="multiselect__pill" data-value="1" title="Active">
        <span class="multiselect__pill-text">Active</span>
        <span class="multiselect__pill-delete" data-action="click->multiselect#removeItem">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="12px" height="12px">
            <path d="M25.707,6.293c-0.195-0.195-1.805-1.805-2-2c-0.391-0.391-1.024-0.391-1.414,0c-0.195,0.195-17.805,17.805-18,18c-0.391,0.391-0.391,1.024,0,1.414c0.279,0.279,1.721,1.721,2,2c0.391,0.391,1.024,0.391,1.414,0c0.195-0.195,17.805-17.805,18-18C26.098,7.317,26.098,6.683,25.707,6.293z"></path>
            <path d="M23.707,25.707c0.195-0.195,1.805-1.805,2-2c0.391-0.391,0.391-1.024,0-1.414c-0.195-0.195-17.805-17.805-18-18c-0.391-0.391-1.024-0.391-1.414,0c-0.279,0.279-1.721,1.721-2,2c-0.391,0.391-0.391,1.024,0,1.414c0.195,0.195,17.805,17.805,18,18C22.683,26.098,23.317,26.098,23.707,25.707z"></path>
          </svg>
        </span>
      </div>
      <div class="multiselect__pill" data-value="4" title="Contracted">
        <span class="multiselect__pill-text">Contracted</span>
        <span class="multiselect__pill-delete" data-action="click->multiselect#removeItem">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="12px" height="12px">
            <path d="M25.707,6.293c-0.195-0.195-1.805-1.805-2-2c-0.391-0.391-1.024-0.391-1.414,0c-0.195,0.195-17.805,17.805-18,18c-0.391,0.391-0.391,1.024,0,1.414c0.279,0.279,1.721,1.721,2,2c0.391,0.391,1.024,0.391,1.414,0c0.195-0.195,17.805-17.805,18-18C26.098,7.317,26.098,6.683,25.707,6.293z"></path>
            <path d="M23.707,25.707c0.195-0.195,1.805-1.805,2-2c0.391-0.391,0.391-1.024,0-1.414c-0.195-0.195-17.805-17.805-18-18c-0.391-0.391-1.024-0.391-1.414,0c-0.279,0.279-1.721,1.721-2,2c-0.391,0.391-0.391,1.024,0,1.414c0.195,0.195,17.805,17.805,18,18C22.683,26.098,23.317,26.098,23.707,25.707z"></path>
          </svg>
        </span>
      </div>
    </div>
    <div class="multiselect__input-container" data-multiselect-target="inputContainer">
      <input type="text" class="multiselect__search" placeholder="Search by status..." data-multiselect-target="search" data-action="multiselect#search keydown->multiselect#onKeyDown" style="padding-top: 0.5rem;">
    </div>
  </div>
  <div style="position: relative;" data-action="click@window->multiselect#closeOnClickOutside">
    <div class="multiselect__dropdown" data-multiselect-target="dropdown">
      <ul class="multiselect__list" data-multiselect-target="list">
        <li>
          <label>
            <input type="checkbox" data-value="1" data-text="Active" data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
            <span>Active</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-value="2" data-text="Disposed" data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
            <span>Disposed</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-value="3" data-text="Proposed" data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
            <span>Proposed</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-value="4" data-text="Contracted" data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
            <span>Contracted</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-value="5" data-text="Owned" data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
            <span>Owned</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-value="6" data-text="Deleted" data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
            <span>Deleted</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-value="7" data-text="Pending" data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
            <span>Pending</span>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

However, I'd like to apply that same action to the pillTemplate here:

stimulus-multiselect/src/multiselect.js

Line 397 in 819f3e8

<span class="multiselect__pill-delete" data-action="click->multiselect#removeItem">

Perhaps we could append an action to the pillTemplate through an option?

[BakiVernes]

There is actually an Event fired when toggling an element. These custom events hold information about the item added/removed. You can use this event to attach an event listener and do stuff with it. It's mentioned in the docs as well.

I think this is a better approach than adding options. Tell me if this helps.