Not working with wire:navigate

[QualityCodeSA]

trafficstars

Bootstrapt modal working fine when first time open page with refresh but in livewire 3 not working when come back from other page (usinf wire:navigate) and open modal

[aliqasemzadeh]

yes, I know some problem and I am working hard on it.

[QualityCodeSA]

yes, I know some problem and I am working hard on it.

Thank you brother. Update me once finish so I will apply changes

[aliqasemzadeh]

Check note and update. I hope this update help me and then let me know.

[QualityCodeSA]

@aliqasemzadeh any update regarding not working with wire:navigate ?

[aliqasemzadeh]

@QualityCodeSA No it doesn't work. I think we need trait to dispatch modals to solve this problem.

[aliqasemzadeh]

@QualityCodeSA Trait doesn't work.

[QualityCodeSA]

@aliqasemzadeh any possibility to work or not?

[aliqasemzadeh]

@QualityCodeSA It looks like there is no solution a the moment.

[mozhuilungdsuo]

I think we need to persist the livewire modal? @persist('modals')

<livewire-modals

@endpersist @aliqasemzadeh @QualityCodeSA

[aliqasemzadeh]

@mozhuilungdsuo Please give us example.

[mozhuilungdsuo]

as per the documentation a <a href="/users" wire:navigate>Users</a> requests the page in the background and replaces the current page. So the livewire modal component ie <livewire:modals/> we put in the app layout view would show the old livewire component and since we added a new livewire component itll give issue ( thats what i assume). so as per the documentation herehttps://livewire.laravel.com/docs/navigate

we should be keeping this in the app layout view. @persist('player') <livewire:modals/> @endpersist I maybe wrong but this should ideally fix it.

[r7zq]

@mozhuilungdsuo yeah persist works, another issue i found is modal-backdrop not being created so the solution i found is to add event listener for livewire:navigated and dispose the old modal document.addEventListener("livewire:navigated", () => { let modal = Modal.getInstance(modalsElement); if (modal) { modal.dispose(); } });