fix(ui): resolve "Could not find Livewire component in DOM tree" on What's New click

The account-menu dropdown wrapped its panel, including the
settings-dropdown Livewire component, in <template x-if="open">.
The "What's New" button carries both wire:click and @click="open =
false" on the same element, so closing the menu tore the Livewire
component out of the DOM while its request was still in flight,
leaving Livewire unable to find the component to morph the response
into.

Switch back to x-show/x-cloak so the component stays mounted (just
hidden via CSS) and survives the menu-close click.

Fixes #11219

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
BASIM NASSER A ALDAWOOD
2026-08-13 17:25:03 +03:00
co-authored by Claude Sonnet 5
parent 447a26568e
commit b1d7cc11b8
2 changed files with 10 additions and 11 deletions
@@ -81,14 +81,13 @@
</svg>
</button>
<template x-if="open">
<div @class([
'listbox-panel z-[90]! max-h-none! w-52! min-w-0! overflow-visible! animate-in fade-in zoom-in-95 duration-150',
'right-0! left-auto!' => ! $sidebar,
'bottom-full! left-0! right-auto! top-auto! mb-1!' => $sidebar,
'origin-bottom-left' => $sidebar,
'origin-top-right' => ! $sidebar,
])>
<div x-show="open" x-cloak @class([
'listbox-panel z-[90]! max-h-none! w-52! min-w-0! overflow-visible! animate-in fade-in zoom-in-95 duration-150',
'right-0! left-auto!' => ! $sidebar,
'bottom-full! left-0! right-auto! top-auto! mb-1!' => $sidebar,
'origin-bottom-left' => $sidebar,
'origin-top-right' => ! $sidebar,
])>
<div class="min-w-0 px-2 py-1.5">
<div class="truncate text-[13px] font-semibold text-black dark:text-fg">{{ $userName }}</div>
<div class="truncate text-[11px] text-neutral-500 dark:text-fg-faint">{{ $userEmail }}</div>
@@ -194,6 +193,5 @@
</span>
</button>
</form>
</div>
</template>
</div>
</div>
+2 -1
View File
@@ -43,7 +43,8 @@ it('changes appearance from a submenu instead of navigating to a separate page',
->not->toContain('@change="appearanceOpen = false; open = false"')
->toContain('this.appearanceOpen = false;')
->toContain('this.open = false;')
->toContain('<template x-if="open">')
->toContain('<div x-show="open" x-cloak @class([')
->not->toContain('<template x-if="open">')
->not->toContain('x-show.important="open"')
->not->toContain('<div x-show="open" x-cloak x-transition.opacity.duration.120ms')
->toContain("['value' => 'light', 'label' => 'Light'")