Fixing Laravel Livewire Select2 Issues in Wizard Forms

Websolutionstuff | Jan-21-2025 | Categories : Laravel

Using Select2 with Laravel Livewire can enhance your forms by providing a user-friendly dropdown experience. However, when integrating Select2 with a wizard form in Livewire, you might encounter issues such as Select2 not initializing or losing its functionality during page transitions.

In this article, I'll guide you through fixing these problems step by step, ensuring Select2 works seamlessly in your Livewire wizard forms.

Fixing Laravel Livewire Select2 Issues in Wizard Forms

Fixing Laravel Livewire Select2 Issues in Wizard Forms

 

Livewire:

<?php

use Livewire\Component;

class StepComponent extends Component
{
    public $currentStep = 1;
    public $select1;
    public $options = [];

    public function mount()
    {
        $this->options = [
            ['id' => 1, 'name' => 'Option 1'],
            ['id' => 2, 'name' => 'Option 2'],
            ['id' => 3, 'name' => 'Option 3'],
        ];
    }

    public function updateSelectValue($data)
    {
        $this->select1 = $data['value'];
    }

    public function render()
    {
        return view('livewire.step-component');
    }
}

 

Livewire Component File

<div>
    @if($currentStep == 1)
        <div wire:ignore>
            <label for="select1">Select an option:</label>
            <select id="select1" class="form-control" style="width: 100%;">
                <option value="">-- Choose an option --</option>
                @foreach($options as $option)
                    <option value="{{ $option['id'] }}"
                        @if($select1 == $option['id']) selected @endif>
                        {{ $option['name'] }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="mt-3">
            <strong>Selected Value:</strong> {{ $select1 }}
        </div>
    @else
        <div>Step 2 content</div>
    @endif
</div>

<script>
    document.addEventListener('livewire:init', () => {
        // Function to initialize Select2
        function initializeSelect2() {
            $('#select1').select2();

            // Dispatch Livewire event on change
            $('#select1').on('change', function () {
                const selectedValue = $(this).val();

                @this.set('select1', selectedValue);
            });
        }

        initializeSelect2();

        Livewire.hook('morphed',  ({ el, component }) => {
            // Runs after all child elements in `component` are morphed
            console.log($('#select1').html());
            initializeSelect2();
        })
    });
</script>

 


You might also like:

Recommended Post
Featured Post
How To Setup 404 Page In Angular 12
How To Setup 404 Page In Angul...

In this article, we will see how to set up a 404 page in angular 12.  To set up a 404 page in the angular...

Read More

May-11-2022

Laravel 10 Desktop and Mobile User Agent Parser
Laravel 10 Desktop and Mobile...

Discover the magic of Laravel 10's Desktop and Mobile User Agent Parser! With the help of the jenssegers/agent packa...

Read More

Nov-24-2023

Laravel 10 Delete Multiple Records Using Checkbox
Laravel 10 Delete Multiple Rec...

In this article, we will see laravel 10 delete multiple records using the checkbox. Here, we will learn about how to del...

Read More

Mar-03-2023

How To Roll back Specific Migration In Laravel
How To Roll back Specific Migr...

In this article, we will explore the process of rolling back specific migrations in Laravel, focusing on Laravel version...

Read More

Nov-11-2022