useTransition: should I put it in initialize() or connect() ?

[nflorentin]

Hi,

The documentation show the use of useTransition in the connect function of the stimulus controller.

Doing that, I noticed that the enter/leave/toggleTransition callbacks pill up when the stimulus controller is connected multiple times. Example:

1. Page loads, controller is initialized and connected
2. Request made with turbo, I call disconnect() and connect() from my controller because I detect a morph
3. I have now 2 calls on enter/leave/toggleTransition on click on my element (so my dropdown is not working anymore)
4. (3 calls on next request, ect)

It seems that useTransition does not support being connected multiple times.

I tried 2 things that seem to work but I don't know which one is better:

1. keep calling useTransition from connect function and add the following lines in a disconnect function:

this.enter = null
this.leave = null
this.toggleTransition = null

2. call useTransition in initialize function

My main goal is to avoid memory leak.

Thanks for your work! and your future help :-)

[gamecreature]

I had the same problem, drag/drop elements with a stimulus useTransition controller on it. Which results in disconnect/connect. Which makes the useTransaction fail the next time (double enter/leave events).

Added the disconnect sample from above, which solves the problem. (Thanks @nflorentin)

Though I don't think this is a clean solution, maybe add disconnectUseTransition to the library and documentation? (At the moment you need to have the knowledge that enter/leave and toggleTransition properties are being used).
But.. it's still beta, so I guess improvements are coming ☺️