Appending additional actions to pillTemplate #3
Description
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="[{"value":1,"text":"Active"},{"value":2,"text":"Disposed"},{"value":3,"text":"Proposed"},{"value":4,"text":"Contracted"},{"value":5,"text":"Owned"},{"value":6,"text":"Deleted"},{"value":7,"text":"Pending"}]" data-multiselect-selected-value="[{"value":1,"text":"Active"},{"value":4,"text":"Contracted"}]">
<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
Perhaps we could append an action to the pillTemplate through an option?