Syncing data changes with 3rd party libraries

[Lee-ERP]

I have an existing laravel component <x-dropdown> (not Livewire) that provides a select input with TomSelect (similar to choices.js) initialised on it.

I want to add Alpine so I can react based on the value of that dropdown. This works fine:

<div x-data="{ someValue: ''}">
   <x-dropdown x-model="someValue" />
</div>

However if I update the value in alpine programatically, the value displayed in the select box doesn't change, as TomSelect will only update it's own selected value on receiving a change Dom Event.

So for example, if I programatically update the value like, the alpine state updates, but the select box shows the wrong value:

<div x-data="{ someValue: ''}" x-init="setTimeout(() => { someValue = 'foo'; }, 5000)">
   <x-dropdown x-model="someValue" />
</div>

I can fix this, by triggering the dom event manually:

<div x-data="{ someValue: ''}" x-init="setTimeout(() => { 
    someValue = 'foo'; 
    $nextTick(() => $refs.input.dispatchEvent(new Event('change', { bubbles: true })));
}, 5000)">
   <x-dropdown x-model="someValue"  x-ref="input" />
</div>

This seems to work, but is there a cleaner solution to this?

I thought about overriding the value setter via defineProperty so that I could trigger the dom event on .value change, but (a) I couldn't get that to work, and (b) I suspect i'd likely break Alpine in doing so as I assume that's what Alpine also does.

The other option is an ugly interval, but that's got performance problem written all over it:

<x-dropdown x-model="someValue" x-sync-input-events.change>


 Alpine.directive('sync-input-events', (el, { modifiers }, { evaluateLater, effect }) => {
  
        const eventNames = modifiers.length ? modifiers : ['input'];
        let lastValue = el.value;

        setInterval(() => {
            if (el.value !== lastValue) {
                lastValue = el.value;
                for (const name of eventNames) {
                    el.dispatchEvent(new Event(name, { bubbles: true }));
                }
            }
        }, 50);
});

Any other ideas on this?

TLDR; What options are there for 3-way data binding, where the input state needs to be in sync between Alpine, DOM and a 3rd Party Lib?

[ekwoka]

Ideally, the custom element that is implementing the Select should be checking for changes to it's own value so that it would behave more like a real element.

So it could be worth discussing it there with reducing out Alpine entirely and changing it to just doing element.value =. It is a situation it should be able to handle.