From b1d7cc11b8ef450d8263010dddb9fd7789ba0c73 Mon Sep 17 00:00:00 2001
From: BASIM NASSER A ALDAWOOD
 <133729701+BasimNasserMu@users.noreply.github.com>
Date: Thu, 13 Aug 2026 17:25:03 +0300
Subject: [PATCH] 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>
---
 .../views/components/top-user-menu.blade.php   | 18 ++++++++----------
 tests/Feature/TopUserMenuTest.php              |  3 ++-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/resources/views/components/top-user-menu.blade.php b/resources/views/components/top-user-menu.blade.php
index 8a32b5dd6..c64115fa3 100644
--- a/resources/views/components/top-user-menu.blade.php
+++ b/resources/views/components/top-user-menu.blade.php
@@ -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>
diff --git a/tests/Feature/TopUserMenuTest.php b/tests/Feature/TopUserMenuTest.php
index 1399e68c9..95d5d9202 100644
--- a/tests/Feature/TopUserMenuTest.php
+++ b/tests/Feature/TopUserMenuTest.php
@@ -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'")