How to use hx-trigger with bootstrap selectpicker

Question

I'm trying to trigger an htmx request off of a bootstrap selectpicker hidden.bs.select (https://developer.snapappointments.com/bootstrap-select/options/#events).

change does not work because the selectpicker triggers a change as soon as you select an option and I want to only trigger the event when the select menu is closed.

I've tried both hx-trigger = "hidden.bs.select" and hx-trigger="hidden.bs.select:from document". Neither work.

I've gotten around it by doing this, but I'm wondering why the above doesn't just work.

 $('.selectpicker').on(
        'hidden.bs.select',
        function (e, clickedIndex, isSelected, previousValue) {
            e.target.dispatchEvent(new Event('selectpickerHidden'));
        }
    );

and then in the html doing hx-trigger="selectpickerHidden"