stimulus-checkbox-select-all icon indicating copy to clipboard operation
stimulus-checkbox-select-all copied to clipboard

Changes in the select all checkbox should also trigger the input event

Open jonathandean opened this issue 1 year ago • 0 comments

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.

jonathandean avatar Sep 02 '22 18:09 jonathandean