Event listener priority between controllers

1

Hello everyone,

I need advice about controllers events and listeners.
I use Symfony UX and I have some times priority issues with event listeners.

The password input using Symfony UX Toggle Password and my custom controller :

<input
    type="password"
    id="password"
    name="_password"
    class="form-control"
    placeholder="Mot de passe"
    data-controller="toggle-password symfony--ux-toggle-password--toggle-password" data-symfony--ux-toggle-password--toggle-password-button-classes-value="&#x5B;&quot;btn&quot;,&quot;btn-lg&quot;,&quot;btn-outline-default&quot;&#x5D;" data-symfony--ux-toggle-password--toggle-password-visible-label-value="" data-symfony--ux-toggle-password--toggle-password-hidden-label-value=""
>

I need to append controller’s element to closest div.input-group. Here is my controller :

import { Controller } from "@hotwired/stimulus";

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    connect() {
        this.element.addEventListener('toggle-password:connect', this._onConnect);
    }

    disconnect() {
        this.element.removeEventListener('toggle-password:connect', this._onConnect);
    }

    _onConnect(event) {
        event.detail.element.closest('.input-group').appendChild(event.detail.button);
    }
}

Sometimes, Symfony UX Toggle Password controller launches first, dispatchs the toggle-password:connect and then my controller is executed.

Because of this, my controller misses Symfony UX Toggle Password controller’s connect event and don’t update element position in the DOM.

Is there a way to add a “priority” between controller’s events on a single DOM element to make sure event listeners as intended ?

Thank you for your support !