Livevire & AlpineJS dependent wire:ignore pull downs with TomSelect JS Plugin

[bojanst]

Hi, Thanks for the great AlpineJS features. I am kind of new into AlpineJS (And Livewire) and i have a situation where i am implementing a form , where i have among everything else, an interesting situation where i set 2 Select fields as TomSelect Fields with x-init, and i want on select (change) on first one , to be able to populate second one with options dynamically.

To keep TomSelect in charge, i set parent div-s to be wire:ignore.

i made some Playground for this:
https://laravelplayground.com/#/snippets/6ff8f186-51d1-43ef-8fb8-070c09fe3d26

Now what confuses me is , how to map the locations TomSelect and how to refresh data based on what is select into Companies pull-down?

I tried @entangle('companyLocations') but no luck.

[ekwoka]

im not sure if this is actually representative of your real code, but your x-inits are strange. You don't need the timeout, and you could actually put it directly on the select elements themselves with just x-init="new TomSelect($el).on('change', () => blahblah)"

It looks like you need to tell it to reinitialize after the new options are added to the page, though.

[bojanst]

Hi @ekwoka , Thanks for your answer, and yeah, this is a representation of my real code of a project that i am working on, and for some reason there i had to add timeout since i got this message that TomSelect is not defined.
Also, this is actually my problem and my issue, how on change on Company drop-down to set values for Locations drop-down.
Btw this is a Laravel project and i am using Livewire/AlpineJS for Form.
I appreciate your help!

[ekwoka]

I'm guessing you're just using third party file links? Should put the TomSelect before the Alpine stuff, or, even better, bundle it directly in imported.