Stimulus et intl-tel-input sans faire exploser la charge CPU

En écrivant une application qui utilise Stimulus, j'ai eu besoin d'utiliser intl-tel-input, je suis tombé sur cette "issue Github"

Que se passe-t-il entre Stimulus et intl-tel-input ?

En fait, pour fonctionner, intl-tel-input clone l'élément de base, donc si vous liez cet élément de base à un contrôleur Stimulus, et que c'est ce contrôler qui instancie intl-tel-input alors vous entrez purement et simplement dans une boucle infinie jusqu'à ce que vous éclatiez complètement l'espace mémoire qui vous est autorisé par le moteur du navigateur.

Dans "l'issue Github", DHH dit "Si vous crée une boucle infinie, c'est difficile à contrer".

Comment faire en sorte que cela fonctionne quand même ?

On va simplement "tricher", comme d'habitude, on sait que l'élément de base ne peut pas être utilisé pour déclencher un contrôleur Stimulus, mais un élément au-dessus, c'est possible non ?

L'idée est très simple, nous allons entouré de notre "input" d'une div, et lier cette "div" au contrôleur Stimulus. Ensuite notre "input" est tout simplement une "target" et au moment ou intl-tel-input fera ce qu'il a faire, pas de recréation d'un autre contrôleur Stimulus.

Pour se faire dans votre template (dans mon cas, un twig)

Mettez simplement sur la "div" qui entoure votre "input", le contrôleur Stimulus.

Ensuite, il faut mettre un attribut à "l'input", dans mon cas ça se passe dans un formulaire Symfony.

(Oui j'ai mis un petit "autocomplete" en plus, c'est beau, non ? 😛)

Enfin, voici un exemple de mon contrôleur Stimulus

Rien de bien particulier, hormis que l’on ne travaille jamais avec "this.element"

Conclusion

En voyant "l'issue", je me suis dit que faire un petit article rapide pour ce problème pouvait être une bonne idée, du coup, je l'ai fait.
À la prochaine 😁