mario1987's avatar

Livewire and Tomselect || problem on render tom select

Hi, thanks to every one will reply to this discussion. I have strange problem when a livewire component was re-rendered, i mean, into a form i have an input with "wire:model.blur" to update a properties of a component, and a button with wire:click that call a function able to create a model instance. When i click on the button and the component was re-rendered my tom-select lost is js and css like a normal select.

0 likes
3 replies
Lilbro's avatar

Same error and been stucked for 2 days. Did you find the solution?

egamipeaks's avatar

I had a similar issue with select2. I solved it by re-running the JS to instantiate select2 when the component refreshes.

Example:

Alpine.data('checkoutManager', () => ({
    init() {
		this.setupEventListeners();
        jQuery(() => this.initSelect2());
    },

	setupEventListeners() {
        $wire.on('checkout-page-rendered', () => {
            this.$nextTick(() => {
                this.initSelect2();
            });
        });
    },

	initSelect2() {
        select2Fields.forEach(({ selector, placeholder, formField }) => {
            jQuery(selector).select2({ width: '100%', placeholder });
            jQuery(selector).on('select2:select', e => {
                $wire.set(formField, e.params.data.id);
            });
        });
    },

In my Livewire component class, I have the following event that is dispatched to

public function rendered()
{
    // dispatch event for JS on page re-render
    $this->dispatch('checkout-page-rendered');
}

Please or to participate in this conversation.