Reload issue with Laravel Livewire and Bootstrap form

Question

I’m seeing a Livewire issue for me when I use ANY Javascript form. Use the following form: https://bbbootstrap.com/snippets/multi-step-form-wizard-30467045 (Although I tried other forms and it happens to me all due to wire: model events from livewire)

The problem is that WIRE: MODEL takes me to the first section and I can’t use WIRE: IGNORE because it overrides SELECT related behaviors.

In the second section I use the following related form:

<div class="form-group">
  <label for="provincia">Provincia</label>
  <select wire:model="ubicacionSeleccionada" class="form-control" id="ubicacion">
       <option value=''>Seleccionar provincia</option>
       @foreach($ubicaciones as $ubicacion)
       <option value="{{$ubicacion->id}}">{{ $ubicacion->ubicacion }}</option>
       @endforeach                                          
  </select>
  </div>
                                        
    
   <div class="form-group">
   <label for="tipopropiedad">Localidad</label>
   <select wire:model="area" class="form-control" id="localidad
         {{ count($this->areas)== 0 ? 'hidden' : '' }} ">
         <option value=''>Seleccionar localidad</option>
         @foreach($this->areas as $area)
         <option value={{ $area->id }}>{{ $area->name }}</option>
         @endforeach
   </select>
   </div>

And this does not allow me to use the WIRE: IGNORE to abort the events.

The problem is that any WIRE: MODEL generates an event that takes the form to the first section. It seems to be a REFRESH

Does anyone know how I could use livewire without this inconvenience?

EDITION

BUTTON NEXT VIEW

<input type="button" name="next" class="next action-button" value="Continue" />

JAVASCRIPT

<script>
$(document).ready(function() {

    var current_fs, next_fs, previous_fs; //fieldsets
    var opacity;

    $(".next ").click(function() {

        current_fs = $(this).parent();
        next_fs = $(this).parent().next();

        //Add Class Active
        $(".progressbar li ").eq($("fieldset ").index(next_fs)).addClass("active ");

        //show the next fieldset
        next_fs.show();
        //hide the current fieldset with style
        current_fs.animate({
            opacity: 0
        }, {
            step: function(now) {
                // for making fielset appear animation
                opacity = 1 - now;

                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                next_fs.css({
                    'opacity': opacity
                });
            },
            duration: 600
        });
    });

    $(".previous ").click(function() {

        current_fs = $(this).parent();
        previous_fs = $(this).parent().prev();

        //Remove class active
        $(".progressbar li ").eq($("fieldset ").index(current_fs)).removeClass("active ");

        //show the previous fieldset
        previous_fs.show();

        //hide the current fieldset with style
        current_fs.animate({
            opacity: 0
        }, {
            step: function(now) {
                // for making fielset appear animation
                opacity = 1 - now;

                current_fs.css({
                    'display': 'none',
                    'position': 'relative'
                });
                previous_fs.css({
                    'opacity': opacity
                });
            },
            duration: 600
        });
    });

    $('.radio-group .radio').click(function() {
        $(this).parent().find('.radio').removeClass('selected');
        $(this).addClass('selected');
    });

    $(".submit ").click(function() {
        return false;
    })

});

Answer 1

Livewire is reloading the component when you change the data in the form. Your Livewire component contains the entire form so any changes made by your javascript will be forgotten due to loss of state.

Instead of using the supplied JavaScript for the page changes, use a Livewire property like selectedSection and use it to determine with section of the form to show. This will allow you to maintain the state of the form when Livewire updates. Also use Livewire methods to update the value of selectedSection when the page buttons are clicked.