How reinitialize the components

[f4xy]

I have a select2 component in my form and I have surrounded the select with a wire:ignore.

<div wire:ignore>
    <select id="selected_tasks" name="selected_tasks" multiple="multiple" class="selected_tasks form-select block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5">
        @foreach($tasks as $task)
            <option value="{{$task->id}}">
                {{$task->title}}
             </option>
         @endforeach
    </select>
</div>

The problem I have is if I submit my form and it fails validation the select2 component no longer lets you add or remove items.

The following solves the problem：

document.addEventListener("livewire:load", () => {
	Livewire.hook('message.processed', (message, component) => {
		$('.form-select').select2()
    
	}); });

How can I use the following code if tom-slecet is used?

document.addEventListener("livewire:load", () => {
	Livewire.hook('message.processed', (message, component) => {
		new TomSelect("#select-state", {});
	}); });

But it doesn't work。

[oyejorge]

<select id="selected_tasks" ...
...
new TomSelect("#select-state",{});

Looks like it should be new TomSelect("#selected_tasks",{});

[f4xy]

not working .
tom-select.ts:99 Uncaught (in promise) Error: Tom Select already initialized on this element

[oyejorge]

The sync method might be what you're looking for https://tom-select.js.org/docs/api/#sync

…

On Thu, Sep 23, 2021, 06:04 f4xy ***@***.***> wrote: not working . tom-select.ts:99 Uncaught (in promise) Error: Tom Select already initialized on this element — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#211 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAH6YRCMAZZCCGEPAKFILPDUDMQXFANCNFSM5EOKBC3A> .

[f4xy]

First of all, thank you very much for providing such a powerful plug-in.
It is more suitable for me than select2. She can get the value directly in livewire.
However, as you prompted, I added the following code.

var peopleSelect = new TomSelect('.tom-select');
    document.addEventListener("livewire:load", () => {
        Livewire.hook('message.processed', (message, component) => {
            peopleSelect.sync();
        });
    });

When I dynamically add row, the new row cannot be rendered and displayed normally.

However, if I use the following code when using select2, I can successfully reload and display.

document.addEventListener("livewire:load", () => {
	Livewire.hook('message.processed', (message, component) => {
		$('.select-people').select2()
    
	}); });

[andreasmatuszewski]

Did you find a solution or are you still using select2?

[maulvieyazid]

I want to give the solution I found.
first, you can't use wire:model in tom select because when you change the value, Livewire will make changes continuously without stopping.
so the solution is to use Livewire.emit event.
you need to use let instead of const, because you will do the initialization again on tom select later.

      let pendamping = new TomSelect('#pendamping', {
          maxOptions: false,
          sortField: {},
      });
      
      pendamping.on('change', function(value){
          Livewire.emit('changePendamping', value);
      });

And then in the component's class i register a listener and declare a function of the event

    protected $listeners = ['changePendamping'];
    
    public function changePendamping($value)
        {
           // logic to update the value in DB
           
            $this->dispatchBrowserEvent('pendamping-updated', [
                'type'          => 'success',
                'message'       => 'Dosen Pendamping Berhasil Diubah.',
                'nikPendamping' => $value
            ]);
        }

inside the function i call the dispatchBrowserEvent method to display the success message to browser. And then i add event listener in my blade

    window.addEventListener('pendamping-updated', event => {
        pendamping.destroy();
    
        pendamping = new TomSelect('#pendamping', {
            maxOptions: false,
            sortField: {},
        });
        pendamping.setValue(event.detail.nikPendamping);
    
        Toastify({
            text: event.detail.message,
            duration: 3000,
            close: true,
            gravity: "bottom",
            position: "left",
            backgroundColor: event.detail.type == 'success' ? "#4fbe87" : "#dc3545",
        }).showToast();
    })

Notice that when livewire re-renders the component, it won't initialize the tom select.
so what we have to do is, call the destroy() method on tom select then initialize it again and don't forget to use setValue(), because when tom select is initialized again, the previously selected value will be lost.

[ampedweb]

Hi guys I thought I would post an adapted solution I found to this based on the following stack overflow article here

I execute the following code AFTER an ajax call has resolved and I have updated the underlying <select> element

//This is a filter for clearOptions (see docs) to ensure that my initial placeholder option with a value of 0 isn't removed and stays in the same position in the option list (first)
const clearFilter = (option,value) => value == 0;

//Remove the currently selected option
this.tomSelectInstance.clear();
//Clear all of the options that have currently been rendered by tom select in the dropdown
this.tomSelectInstance.clearOptions(clearFilter);
//Syncronise the plugin with the updated element
this.tomSelectInstance.sync();
//Here I set my selected value back to 0, which is my "Blank" placeholder option
this.tomSelectInstance.setValue(0)

You can read more on these methods in the Tom Select API docs here: https://tom-select.js.org/docs/api/

Hopefully this is helpful to someone facing similar problems! :-)