useTransition: Turbo drive - cannot properly disconnect

[BriceFab]

Hello,

I tested to implement useTransition with Turbo drive (SPA naviguation).
And it doesn't disconnect properly:

import { Controller } from '@hotwired/stimulus';
import { useTransition } from 'stimulus-use';

export default class extends Controller {
    static targets = ['menu']

    initialize() {
        useTransition(this, {
            element: this.menuTarget,
            enterActive: 'fade-enter-active',
            enterFrom: 'fade-enter-from',
            enterTo: 'fade-enter-to',
            leaveActive: 'fade-leave-active',
            leaveFrom: 'fade-leave-from',
            leaveTo: 'fade-leave-to',
            hiddenClass: 'hidden',
            // set this, because the item *starts* in an open state
            transitioned: false,
        });
    }
    disconnect() {
        this.leave();
    }

    closeMenu() {
        this.leave();
    }

    openMenu() {
        this.enter();
    }

    toggleMenu() {
        this.toggleTransition();
    }
}

{% extends 'layout/base.html.twig' %}

{% block body %}
    <a href="{{ path('test') }}">
        page 1
    </a>

    <div {{ stimulus_controller('front--menu-toggler') }}>
        <button {{ stimulus_action('front--menu-toggler', 'toggleMenu') }}>
            Toggler
        </button>

        <div class="hidden" {{ stimulus_target('front--menu-toggler', 'menu') }}>
            mon menu
        </div>
    </div>
{% endblock %}

Each time I naviguate between page, it will register multiple instance of this controller and events are trigger multiple times (which will cause issue and memory leaks).

Thank in advance

[marcoroth]

Hey @BriceFab, thank you for reporting this!

Is there any way you can provide a small reproducible example for this? This would help immensely for addressing your issues. Thank you!