Fix showing updated tree

Author: sten

resources/views/filament/resources/menu-resource/pages/manage-menu-items.blade.php

@@ -25,12 +25,12 @@ class="space-y-6"
                     </div>
                 @else
                     <!-- Tree Items -->
-                    <div class="space-y-2" id="menu-items-container">
+                    <div class="space-y-2" id="menu-items-container" wire:key="tree-{{ $refreshKey }}">
                         @foreach($this->record->menuItems()->with(['children', 'linkable'])->whereNull('parent_id')->orderBy('_lft')->get() as $item)
                             @livewire('filament-flexible-content-block-pages::menu-tree-item', [
                                 'item' => $item,
                                 'maxDepth' => $this->getMaxDepth()
-                            ], key($item->id))
+                            ], key: "item-{$item->id}-{$refreshKey}")
                         @endforeach
                     </div>
                 @endif

src/Resources/MenuResource/Pages/ManageMenuItems.php

@@ -31,12 +31,20 @@ class ManageMenuItems extends Page implements HasActions, HasForms
 
     public mixed $record;
 
+    public $refreshKey = 0;
+
     public function mount(int|string $record): void
     {
         $menuModel = static::getResource()::getModel();
         $this->record = $menuModel::findOrFail($record);
     }
 
+    protected function refreshTree(): void
+    {
+        $this->refreshKey++;
+        $this->dispatch('menu-items-updated');
+    }
+
     public function getTitle(): string
     {
         return flexiblePagesTrans('menu_items.manage.title', [
@@ -220,7 +228,7 @@ public function deleteMenuItem(int $itemId): void
             // Delete the item
             $item->delete();
 
-            $this->dispatch('menu-items-updated');
+            $this->refreshTree();
 
             Notification::make()
                 ->title(flexiblePagesTrans('menu_items.messages.item_deleted'))
@@ -246,7 +254,7 @@ public function confirmDeleteWithChildren(int $itemId): void
                 // Delete the item and all its descendants
                 $item->delete();
 
-                $this->dispatch('menu-items-updated');
+                $this->refreshTree();
 
                 Notification::make()
                     ->title(flexiblePagesTrans('menu_items.messages.item_and_children_deleted'))
@@ -302,7 +310,7 @@ public function reorderMenuItems(array $orderedItems): void
             // Process the reordering with proper nested set operations
             $this->processNestedSetReorder($orderedItems);
 
-            $this->dispatch('menu-items-updated');
+            $this->refreshTree();
 
             Notification::make()
                 ->title(flexiblePagesTrans('menu_items.messages.items_reordered'))
@@ -506,7 +514,7 @@ public function moveMenuItem(int $itemId, ?int $newParentId = null, ?int $afterI
                 }
             }
 
-            $this->dispatch('menu-items-updated');
+            $this->refreshTree();
 
             Notification::make()
                 ->title(flexiblePagesTrans('menu_items.messages.item_moved'))
@@ -702,7 +710,7 @@ public function createMenuItem(array $data): void
                 ->send();
 
             // Refresh the menu items tree view
-            $this->dispatch('menu-items-updated');
+            $this->refreshTree();
 
         } catch (Exception $e) {
             Notification::make()
@@ -756,7 +764,7 @@ public function updateMenuItem(int $itemId, array $data): void
                 ->send();
 
             // Refresh the menu items tree view
-            $this->dispatch('menu-items-updated');
+            $this->refreshTree();
 
         } catch (Exception $e) {
             Notification::make()