From 83f0d355ebdc8d2f46bb190397b9093ffc3fda14 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <chabdulrahmaan@gmail.com>
Date: Wed, 23 Apr 2025 21:10:17 +0500
Subject: [PATCH 1/2] refactor: make `user` reactive using computed and
 simplify prop passing

- Switched `user` from a static variable to a computed property to enable reactivity.
  This ensures updated user data (e.g. after profile update) is reflected in the NavBar
  without requiring a full page refresh.
- Updated prop binding syntax from `:user="user"` to shorthand `:user`.
---
 resources/js/components/NavUser.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index c31cd283..2655b69e 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -5,10 +5,11 @@ import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/c
 import { type User } from '@/types';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
+import { computed } from 'vue';
 import UserMenuContent from './UserMenuContent.vue';
 
 const page = usePage();
-const user = page.props.auth.user as User;
+const user = computed(() => page.props.auth.user as User);
 const { isMobile, state } = useSidebar();
 </script>
 
@@ -18,7 +19,7 @@ const { isMobile, state } = useSidebar();
             <DropdownMenu>
                 <DropdownMenuTrigger as-child>
                     <SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                        <UserInfo :user="user" />
+                        <UserInfo :user />
                         <ChevronsUpDown class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
@@ -28,7 +29,7 @@ const { isMobile, state } = useSidebar();
                     align="end"
                     :side-offset="4"
                 >
-                    <UserMenuContent :user="user" />
+                    <UserMenuContent :user />
                 </DropdownMenuContent>
             </DropdownMenu>
         </SidebarMenuItem>

From 903ff3384723a9e6e29cfcaba761a212f605104e Mon Sep 17 00:00:00 2001
From: Abdul Rahman <chabdulrahmaan@gmail.com>
Date: Wed, 23 Apr 2025 21:11:56 +0500
Subject: [PATCH 2/2] fix: properly focus password input on error without using
 $el or ref

- Removed `passwordInput` ref and reliance on `$el` to access the input field inside the `Input` component.
- Fixed `TypeError` caused by calling `focus()` on the component instance.
- Now focusing the password input via `formElement.password` in the form's submit error handler.
- Used `nextTick` to ensure the DOM is updated before focusing.
- This approach is cleaner, avoids reliance on component internals, and works reliably with shadcn-vue components.
---
 resources/js/components/DeleteUser.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index fc17f0a2..1125baa7 100644
--- a/resources/js/components/DeleteUser.vue
+++ b/resources/js/components/DeleteUser.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { nextTick } from 'vue';
 
 // Components
 import HeadingSmall from '@/components/HeadingSmall.vue';
@@ -19,8 +19,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-const passwordInput = ref<HTMLInputElement | null>(null);
-
 const form = useForm({
     password: '',
 });
@@ -31,7 +29,13 @@ const deleteUser = (e: Event) => {
     form.delete(route('profile.destroy'), {
         preserveScroll: true,
         onSuccess: () => closeModal(),
-        onError: () => passwordInput.value?.focus(),
+        onError: () => {
+            nextTick(() => {
+                const formElement = e.target as HTMLFormElement;
+                const passwordInput = formElement.password as HTMLInputElement;
+                passwordInput.focus();
+            });
+        },
         onFinish: () => form.reset(),
     });
 };
@@ -66,7 +70,7 @@ const closeModal = () => {
 
                         <div class="grid gap-2">
                             <Label for="password" class="sr-only">Password</Label>
-                            <Input id="password" type="password" name="password" ref="passwordInput" v-model="form.password" placeholder="Password" />
+                            <Input id="password" type="password" name="password" v-model="form.password" placeholder="Password" />
                             <InputError :message="form.errors.password" />
                         </div>