stimulus-checkbox-select-all
stimulus-checkbox-select-all copied to clipboard
Changes in the select all checkbox should also trigger the input event
Problem
Changes in the select all checkbox's state may also need to update other UI elements in the page.
An example is detecting when to show or hide bulk action buttons when any one of the items in the list are selected.
Current Behavior
<input
type="checkbox"
data-checkbox-select-all-target="checkboxAll"
data-action="other-controller#toggleButtons">
Where there is a controller called other
looking for when the input changes and calling the action toggleButtons
, which is never fired:
https://user-images.githubusercontent.com/307888/188218024-34f013c1-d38b-4840-aad3-2a5767578960.mov
Therefore the action buttons only appear when you directly click the select all checkbox but not when you select any items in the list and set it to the indeterminate state.
Desired Behavior
If the input
event were to fire when the checkboxAllTarget
changes we'd be able to do this:
https://user-images.githubusercontent.com/307888/188218174-5924e191-a27f-4e6f-b834-18af26c17d62.mov
Note that the action buttons appear appropriately regardless of which checkboxes are directly clicked.
Solution
Also call triggerInputEvent()
on the checkboxAllTarget
target when its state is refreshed visually. This allows another stimulus controller to run an action when the select all input changes.