[Autocomplete] Error: Tom Select already initialized on this element

[Bartheyrman22]

I get the following error message when moving a TomSelect [Autocomplete] in the DOM.
This after upgrading from 2.21.0 to 2.22.0 (and still present in 2.23.0)

Error connecting controller

 Error: Tom Select already initialized on this element
    TomSelect tom-select.ts:104
    _default_1_createTomSelect2 controller.js:372
    _default_1_createAutocomplete2 controller.js:296

The code I use to move the element:

    filterModal.querySelector('.modal-body').appendChild(autocompleteElement)
    document.querySelector('body').appendChild(filterModal)

[Kocal]

I'm looking at the diff between v2.12.0 and v2.22.0, and I'm not sure to see how switching from item.text to const labelField = commonConfig.labelField ?? 'text'; item[labelField] could introduce an issue.

Are you sure you only updated symfony/ux-autocomplete? Did you updated @hotwired/stimulus or tom-select as well?

Can you provide us a reproducer? 🙏🏻

[Bartheyrman22]

I did some more tests, and it just happens from time to time. So I believe indeed version independant. Probably some race condition?
At the moment without side effects and maybe not related to this bundle but to the stimulus bundle.
I found this: hotwired/stimulus#549
So maybe we should check before attaching a second time and do nothing?

I only updated symfony/ux-autocomplete by using composer require symfony/ux-autocomplete 2.22.0

[FluffyDiscord]

I have this same issue. It happens when I send Symfony form with autocomplete and if it has errors and returns the same page with status code 422, this error happens. The autocomplete still works and what not, but its spamming errors in console.

I have not used any previous versions of UX, I just upgraded Symfony and added this as a replacement for old Select2 bundle.

Using webpack

[FluffyDiscord]

@Bartheyrman22 I found out that someone had been initializing Turbo in the wrong place. It should be included in and it was in the . After fixing that, this error went away and select works as intended

[Bartheyrman22]

@Bartheyrman22 I found out that someone had been initializing Turbo in the wrong place. It should be included in and it was in the . After fixing that, this error went away and select works as intended

@FluffyDiscord Wondering how you fixed it. Were you able to create a pull request or do you have some code to share? Would be cool.

[FluffyDiscord]

@Bartheyrman22 I found out that someone had been initializing Turbo in the wrong place. It should be included in and it was in the . After fixing that, this error went away and select works as intended

@FluffyDiscord Wondering how you fixed it. Were you able to create a pull request or do you have some code to share? Would be cool.

Just as I said. Someone before me was including javascript assets in the . I just moved it to , as it should be there. Fixed for me, and probably other errors I have not come upon.

[aleho]

I'm seeing the same problem very often in combination with Turbo on a live page.

It's unbelievably hard to reproduce (neither in Firefox nor Chrome on Desktop), but it seems that some mobile browsers trigger it more often (getting many error logs by Safari in iOS).

I think it's probably related to how Turbo handles cache restores. All session replays indicate that there's a Turbo navigation from a page with an autocomplete to another page via an anchor and on history back navigation the error is triggered.

A small hotfix to not cause an error in TomSelect could be to check whether the element the controller is called on is already initialized with TomSelect, but that would mean the element completely loses Stimulus handling (especially destroy/disconnect).