Problems with Select2

[GBeushausen]

Hi,
i have a select with over 150 elements to choose from, so i want to use select2 so that the user can search through the elements. However i've got a component which first only displays pure text. only if the user clicks on a button, the text get's transformed into a form.
I'm implementing this with a variable $editMode that is false by default but becomes true on that button press. In my blade template i have an if statement that displays the form if $editMode is true.

The problem is in this configuration i cannot add a script tag below the component to initialize select2 and handle the changed event, because the Javascript doesn't get executed. it would only work if i showed the form directly on page load.

So my workaround was to use jquery and run the code on the press of the edit Button. Which works halfway. Now the select2 get's initializes, but the selected value doesn't get saved. I've read that wire:model doesn't work on select2. So i've added a hidden field with wire:model for that value and i set the value from select2's change event to the hidden field.

But now the data from the hidden field doesn't get saved by livewire. only if i would enter the value by hand, but it doesn't save the value if it's changed by JQuery. I've already tried to trigger the "Input" or "change" event, but Livewire will not save the data.

What can i do to get it running?

$(function () {
    $('.editBtn').click(function () {
        setTimeout(function () {
            $('#industries').select2({
            }).on('change', function (e) {
                $('#industry_id').val($('#industries').select2("val")).trigger('input');
            });
        }, 150);
    });
});

@section('plugins.Select2', true)
<div class="widget details">
    <h2>{{ __('Details') }}</h2>
    <a wire:click.prevent="toggleEditMode" href="#" class="editBtn"><i class="fas fa-pencil-alt"></i></a>
    @if($editMode === true)
        <form class="form" wire:submit="save">
            <div class="form-group">
                <label for="company">{{ __('Industry') }}</label>
                <input id="industry_id" type="text" wire:model="form.industry_id">
                <select id="industries" class="form-control @error('form.industry_id')is-invalid @enderror">
                    <option>{{ __('Choose a value') }}</option>
                    @foreach($industries as $industry)
                        <option value="{{ $industry->id }}" @if($industry->id == $organisation->industry?->id) selected @endif>
                            {{ $industry->{ 'name_' . app()->getLocale() } }}
                        </option>
                    @endforeach
                </select>
                @error('form.industry_id') <span class="error">{{ __($message) }}</span> @enderror
            </div>
    @else
        <label class="displayLabel">{{ __('Industry') }}</label>
        <div class="displayField">{{ $organisation->industry?->{ 'name_' . app()->getLocale() } }}</div>
    @endif
</div>

[NBA707]

Have you tried to init the select2 via AlpineJS? That's what I do, move the init part into alpinejs.

@props([
    'dispatch_event' => 'none',
    'excludeValues' => 'none',
    'label' => 'Customer / W.O.',
    'groups' => 1,
    'lmt' => '', 
    'multiple' => 'multiple="multiple"',
    'clear' => 'true',
    'theme' => 'bootstrap',
    'customers' => [],
    'width' => '100%',
    'placeholder' => 'Enter in a partial company name or GROUP for list of avaiable groups...',
])
<div wire:ignore style="display: inline-block; width: {{ $width }} !important;">
     <div         
        x-data="{
            selectedMake: '',
        }"
        x-init="
            selectedCustomers = $($refs.select).select2({
                minimumInputLength: 2,
                minimumResultsForSearch: 10,
                placeholder: '{{ $placeholder }}',
                allowClear: true,
                theme: '{{ $theme }}',
                dropdownAutoWidth: true,
                ajax: {
                    url: '/wod/customers',
                    type: 'post',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            _token: '{{ csrf_token() }}',
                            qfilter: params.term,
                            groups: {{ $groups }},
                            excludeValues: '{{ $excludeValues }}',                           
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    //slug: item.slug,
                                    id: item.id,
                                    text: item.text
                                }
                            })
                        };
                    }
                }
            });
           
            selectedCustomers.on('select2:select', ( ev ) => {
                    if ('{{ $dispatch_event }}' !== 'none') {
                        selectedMake = ev.target.value // + ': ' + selectedCustomers.val().join(', '); 
                        console.log(selectedMake);
                        if (selectedMake.startsWith('UDA_')) expandSelect2Group( selectedCustomers, 'companies' );
                        Livewire.dispatch('{{ $dispatch_event }}',{ company: ev.target.value});
                        if ('{{ $clear }}'  !== 'false')
                            $(ev.target).val([]).trigger('change');
                    }

            });
        "
    >  
        <div class="form-group">
            <label for="customers" class="{{ $lmt }}" style="font-size: 12pt;">{{$label ?? 'Customer / W.O.' }}:</label>
            <select x-ref="select" id="customer" name="customer[]" {{ $multiple }} class="form-control" >
                @foreach ($customers as $data)
                    <option value="{!! $data->id !!}" SELECTED>{!! $data->text !!}</option>
                @endforeach
            </select>
             @if (isset($showSelectedValue))
                <p class='text-muted'>Selected value: <code x-text="selectedMake"></code></p>
            @endif
        </div>
       
    </div>
</div>

    <script>
        if (typeof window.expandSelect2Group === 'undefined') {
            window.expandSelect2Group = function( select2 , dataField)
            {
                $.ajax({
                    url: "{{ route('explode.select2.group') }}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        dataField: dataField,
                        dataValues: select2.val().join(', '),
                    },
                    success: function(data) {
                        select2.val(null).trigger('change');

                        $.each(data, function (item) {
                            var newOption = new Option(data[item].text, data[item].id, true, true);
                            select2.append(newOption);
                        });

                        select2.trigger('change');
                    },
                    error: function(xhr, status) {
                        //$('#showresults').slideDown('slow')
                    },
                    complete: function(xhr, status) {
                        //$('#showresults').slideDown('slow')
                    }
                });
            }
        }
    </script>