fix(navigation): remove stale cloak after Livewire navigation (#10518)
This commit is contained in:
commit
6c3ea7f1db
2 changed files with 24 additions and 0 deletions
|
|
@ -1,5 +1,13 @@
|
||||||
import { initializeTerminalComponent } from './terminal.js';
|
import { initializeTerminalComponent } from './terminal.js';
|
||||||
|
|
||||||
|
// Livewire 3.5.19+ re-applies `x-cloak` to morphed elements during wire:navigate
|
||||||
|
// (via replaceHtmlAttributes). With `[x-cloak]{display:none}` on the app wrapper,
|
||||||
|
// this blanks the whole page on every navigation until Alpine re-processes it.
|
||||||
|
// Strip leftover x-cloak after each navigation; the initial-load FOUC guard stays.
|
||||||
|
document.addEventListener('livewire:navigated', () => {
|
||||||
|
document.querySelectorAll('[x-cloak]').forEach((el) => el.removeAttribute('x-cloak'));
|
||||||
|
});
|
||||||
|
|
||||||
['livewire:navigated', 'alpine:init'].forEach((event) => {
|
['livewire:navigated', 'alpine:init'].forEach((event) => {
|
||||||
document.addEventListener(event, () => {
|
document.addEventListener(event, () => {
|
||||||
// tree-shaking
|
// tree-shaking
|
||||||
|
|
|
||||||
16
tests/Feature/NavigationCloakTest.php
Normal file
16
tests/Feature/NavigationCloakTest.php
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
it('strips leftover x-cloak after wire:navigate to prevent blank page', function () {
|
||||||
|
$appJs = file_get_contents(resource_path('js/app.js'));
|
||||||
|
|
||||||
|
expect($appJs)
|
||||||
|
->toContain("document.addEventListener('livewire:navigated'")
|
||||||
|
->toContain("querySelectorAll('[x-cloak]')")
|
||||||
|
->toContain("removeAttribute('x-cloak')");
|
||||||
|
});
|
||||||
|
|
||||||
|
it('keeps the initial-load x-cloak guard on the app wrapper', function () {
|
||||||
|
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
|
||||||
|
|
||||||
|
expect($layout)->toContain('x-cloak');
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue