From ad012e70652fedc3709b342f0494a0c031a65488 Mon Sep 17 00:00:00 2001
From: Aaron Lil Vazquez <arn.vazquez@gmail.com>
Date: Fri, 28 Feb 2025 18:06:04 -0300
Subject: [PATCH] fix: set focus on password input after submit error in
 DeleteUser component

---
 resources/js/components/DeleteUser.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index 550610cb..6f2da2c6 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 { ref, nextTick } from 'vue';
 
 // Components
 import HeadingSmall from '@/components/HeadingSmall.vue';
@@ -19,7 +19,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-const passwordInput = ref<HTMLInputElement | null>(null);
+const formContainer = ref<HTMLElement | null>(null);
 
 const form = useForm({
     password: '',
@@ -31,7 +31,12 @@ const deleteUser = (e: Event) => {
     form.delete(route('profile.destroy'), {
         preserveScroll: true,
         onSuccess: () => closeModal(),
-        onError: () => passwordInput.value?.focus(),
+        onError: () => {
+            nextTick(() => {
+                const inputElement = document.getElementById('password') as HTMLInputElement;
+                inputElement?.focus();
+            });
+        },
         onFinish: () => form.reset(),
     });
 };
@@ -45,7 +50,7 @@ const closeModal = () => {
 <template>
     <div class="space-y-6">
         <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
-        <div class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+        <div class="p-4 space-y-4 border border-red-100 rounded-lg bg-red-50 dark:border-red-200/10 dark:bg-red-700/10">
             <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
                 <p class="font-medium">Warning</p>
                 <p class="text-sm">Please proceed with caution, this cannot be undone.</p>
@@ -55,18 +60,20 @@ const closeModal = () => {
                     <Button variant="destructive">Delete account</Button>
                 </DialogTrigger>
                 <DialogContent>
-                    <form class="space-y-6" @submit="deleteUser">
+                    <form ref="formContainer" class="space-y-6" @submit="deleteUser">
                         <DialogHeader class="space-y-3">
                             <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
                             <DialogDescription>
-                                Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your
+                                Once your account is deleted, all of its resources and data will also be permanently
+                                deleted. Please enter your
                                 password to confirm you would like to permanently delete your account.
                             </DialogDescription>
                         </DialogHeader>
 
                         <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>