Stimulus and intl-tel-input without exploding CPU load

When I was writing an application using Stimulus and needed to use intl-tel-input, I came across this "Github issue".

What's going on between Stimulus and intl-tel-input?

In fact, to work, intl-tel-input clones the base element, so if you link this base element to a Stimulus controller, and it's this controller that instantiates intl-tel-input, you'll need to use intl-tel-input.If you link this base element to a Stimulus controller, and it's this controller that instantiates intl-tel-input, then you're simply entering an infinite loop until you completely exhaust the memory space allowed to you by the browser engine.

In the "Github issue", DHH says "If you create an infinite loop, it's hard to counter".

How can we make it work anyway?

We'll simply "cheat", as usual, we know that the base element can't be used to trigger a Stimulus controller, but an element above it, it's possible isn't it?

The idea is very simple: we surround our "input" with a div, and link this div to the Stimulus controller. Then our "input" is simply a "target", and when intl-tel-input does what it's supposed to do, there's no need to recreate another Stimulus controller.

To do this in your template (in my case, a twig)

Simply place the Stimulus controller on the div surrounding your input.

Then put an attribute on the "input", in my case in a Symfony form.

(Yes, I've added a little "autocomplete" too, isn't that nice?)

Finally, here's an example of my Stimulus controller

Nothing special, except that you never work with "this.element".

Conclusion

Seeing the "outcome", I thought it might be a good idea to do a quick article on this problem, so I did.
Until next time?