Fix the Vault edit feature in TreeView

app/Livewire/Vault/Show.php

@@ -5,6 +5,7 @@ namespace App\Livewire\Vault;
 use App\Models\Vault;
 use Livewire\Component;
 use App\Models\VaultNode;
+use Illuminate\Support\Str;
 use Livewire\Attributes\On;
 use Livewire\Attributes\Url;
 use App\Actions\ResolveTwoPaths;
@@ -20,7 +21,7 @@ class Show extends Component
 {
     public Vault $vault;
 
-    public VaultForm $form;
+    public VaultForm $vaultForm;
 
     public VaultNodeForm $nodeForm;
 
@@ -31,13 +32,11 @@ class Show extends Component
 
     public bool $isEditMode = true;
 
-    public bool $showEditModal = false;
-
     public function mount(Vault $vault): void
     {
         $this->authorize('view', $vault);
         $this->vault = $vault;
-        $this->form->setVault($this->vault);
+        $this->vaultForm->setVault($this->vault);
         $this->nodeForm->setVault($this->vault);
 
         if ($this->selectedFile) {
@@ -97,17 +96,20 @@ class Show extends Component
         $this->nodeForm->reset('node');
     }
 
-    public function update(): void
+    public function editVault(): void
     {
         $this->authorize('update', $this->vault);
-        $this->validate();
-        $this->form->update();
+        $this->vaultForm->update();
         $this->vault->refresh();
-        $this->reset('showEditModal');
+        $this->dispatch('close-modal');
     }
 
-    public function updated(): void
+    public function updated($name): void
     {
+        if (!Str::of($name)->startsWith('nodeForm')) {
+            return;
+        }
+
         $this->nodeForm->update();
 
         if ($this->nodeForm->node->wasChanged(['parent_id', 'name'])) {

resources/views/livewire/vault/show.blade.php

@@ -57,7 +57,7 @@
                                         {{ __('Import file') }}
                                     </x-menu.item>
 
-                                    <x-modal wire:model="showEditModal">
+                                    <x-modal>
                                         <x-modal.open>
                                             <x-menu.item>
                                                 <x-icons.pencilSquare class="w-4 h-4" />
@@ -66,8 +66,8 @@
                                         </x-modal.open>
 
                                         <x-modal.panel title="{{ __('Edit vault') }}">
-                                            <x-form wire:submit="update" class="flex flex-col gap-6">
-                                                <x-form.input name="form.name" label="{{ __('Name') }}"
+                                            <x-form wire:submit="editVault" class="flex flex-col gap-6">
+                                                <x-form.input name="vaultForm.name" label="{{ __('Name') }}"
                                                     type="text" required autofocus />
 
                                                 <div class="flex justify-end">