My components are losing their style after any event/action triggers a refresh

#1

What seems to be the problem: After every automatic refresh that might occur after an action is triggered or an event is listened my components seems like they lose some of their css properties even if in the actual HTML they are still there

Steps to Reproduce: Just click on any clickable component or change the value of a select

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples:

Example of one componnt:

First render and refresh render (sorry i can only post 1 image as a new user):

both
both1781Ă—282 18.8 KB

Code: this is the component

    <div>
    <div class="row page-titles mx-0">
        <div class="col-sm-8 p-md-0">
            <div class="welcome-text">
                <h4>Filtra</h4>
                <div class="form-group" style="display: inline-block;">
                    <label>Anno di riferimento</label>
                    <select class="form-control" id="annoRif" wire:model="filter.anno" wire:change="filtri" name="anno" style="width:220px;">
                        <option wire:click="filtri" value="">Tutti</option>
                        @if (!empty($anni))
                        @foreach ($anni as $an)
                            <option wire:key="{{$loop->index}}" value="{{$an['annoRiferimento']}}">{{$an['annoRiferimento']}}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
                <div class="form-group" style="display: inline-block;">
                    <label>Imposta</label>
                    <select class="form-control" id="imposta" wire:model="filter.imposta" wire:change="filtri" name="imposta" style="width:220px;">
                        <option value="">Tutte</option>
                        @if(!empty($nomi_imposta))
                        @foreach ($nomi_imposta as $n)
                        <option wire:key="{{$loop->index}}" value="{{$n['id']}}">
                            @if($n['descrizione_sintetica'] != '')
                            {{ $n['descrizione_sintetica'] }}
                            @else
                            {{ $n['descrizione_imposta'] }}
                            @endif
                        </option>
                        @endforeach
                        @endif
                    </select>
                </div>
                <div class="form-group" style="display: inline-block;">
                    <label>Procedure</label>
                    <select class="form-control" id="proc" name="procedura" wire:model="filter.procedura" wire:change="filtri" style="width:220px;">
                        <option wire:key="1" value="">Ignora</option>
                        <option wire:key="2" value="1">SI</option>
                        <option wire:key="3" value="0">NO</option>
                    </select>
                </div>
                <div class="form-group" style="display: inline-block;">
                    <label>Inesigibilit&agrave;</label>
                    <select class="form-control" id="inesigib" name="inesigibilita" wire:model="filter.inesigibilita" wire:change="filtri" style="width:220px;">
                        <option wire:key="1" value="">Ignora</option>
                        <option wire:key="2" value="1">SI</option>
                        <option wire:key="3" value="0">NO</option>
                    </select>
                </div>
                <div class="form-group" style="display: inline-block;">
                    <label>Cerca Residui</label>
                    <select class="form-control" id="cerca_residui" name="residui" wire:model="filter.residui" wire:change="filtri" style="width:220px;">
                        <option wire:key="1" value="%">Ignora</option>
                        <option wire:key="2" value="0">NO</option>
                        <option wire:key="3" value="1">SI</option>
                    </select>
                </div>
            </div>
        </div>
  </div>
</div>

this is the controller (the logic is actually working, no problems there)

<?php

namespace App\Http\Livewire;
// Imports

class GestionaleHeaderFilter extends Component
{
    protected $paginationTheme = 'bootstrap';

    protected $connection = null;
    public $first_render = true;
    public $filtered = null;
    public $nomi_imposta = null;
    public $anni_riferimento = null;

    public $filter = [
        'anno' => '',         
        'procedura' => '',          
        'inesigibilita' => '',    
        'imposta' => '',        
        'residui' => ''   
    ];

    public function mount(Request $request) {

        $this->nomi_imposta = // Working query
        $this->anni_riferimento = // Working query

    }

    public function filtri() {

        $options = array();

        
       // Filtering logic, this is actually tested and working
    }
    
    public function render()   
    {

        return view('livewire.gestionale-header-filter')
            ->with('nomi_imposta', $this->nomi_imposta)
            ->with('anni', $this->anni_riferimento);
    }
}

Please note that this happens for every component and with the one in the example.
Thank you for any help/suggestion.

#2

What is the order of the rendered elements in the picture? I mean, the above is the first render and the below is when change the css? Because you define the style “width” for every select element, let us know this sequence.
What is the logic behind the wire:model and wire:change in the same select element?

#3

Hello,
the picture above is the first render, the picture below is after any refresh of the component.
The component uses wire:model to set the value of the select, and when a value changes it also triggers a function that filters a table that is present below.
It looks to me that it actually loses some of bootstrap classes, as you can see in the following screenshot
dontknow

First render on the left, after refresh on the right

#4

I think that you need to know when you use wire:model binded to a property don’t need a wire:change in the same element, once you can track the property changes by the updatedProperty backend method

<input type="text" wire:model="property">
//.....
public $property;
//.....
public function updatedProperty()
{
    dd('change?') // track changes here
}

The same applies for other elements like “select”…in your case

<select wire:model="filter.anno" wire:change="filtri" name="anno" style="width:220px;">
//...
public function updatedFilter($value, $updatedKey)
{
	// $updatedKey === 'anno'
}

And the option tag inside the select don’t need the wire:click

<option wire:click="filtri" value="">Tutti</option>

Test trying this changes and tell us how goes

#5

I actually didn’t know about the updatedProperty method and probably i will start using it in my controllers.
But i figured out what the problem was actually.
The template that i was using used some Jquery functions to manipulate the DOM after $(document).ready
that’s why after the first render i had perfectly fine looking components and on subsequent refreshes i had broken looking components.
Finally i solved it by adding some
wire:ignore and wire:ignore.self
on some HTML elements and also i had to split some components in 2 parts : their “template” and the part that actually change (for example a table layout and it’s actual content that might change are now 2 different components) and it’s working, thank you for the suggestions!

1 Like