Merge pull request #17 from connorabbas/develop

dialog fixes

Author: connorabbas

resources/js/Pages/Profile/Partials/DeleteUserForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, useTemplateRef, watch, nextTick } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import Dialog from 'primevue/dialog';
 import InputError from '@/Components/InputError.vue';
@@ -20,25 +20,21 @@ const deleteUser = () => {
     });
 };
 
-watch(modalOpen, (newModalOpen) => {
-    if (newModalOpen) {
-        nextTick(() => {
-            passwordInput.value.$el.focus();
-        });
-    } else {
-        form.clearErrors();
-    }
-});
+function focusPasswordInput() {
+    passwordInput.value.$el.focus();
+}
 </script>
 
 <template>
     <section class="space-y-6">
         <Dialog
+            :draggable="false"
             position="center"
             v-model:visible="modalOpen"
             modal
             header="Are you sure you want to delete your account?"
             :style="{ width: '40rem' }"
+            @show="focusPasswordInput"
         >
             <div class="mb-6">
                 <p class="m-0 text-muted-color">

resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue

@@ -5,7 +5,7 @@ import { useToast } from 'primevue/usetoast';
 import InputError from '@/Components/InputError.vue';
 
 const currentPasswordInput = useTemplateRef('current-password-input');
-const passwordInput = useTemplateRef('password-input');
+const newPasswordInput = useTemplateRef('new-password-input');
 
 const toast = useToast();
 const form = useForm({
@@ -32,7 +32,7 @@ const updatePassword = () => {
         onError: () => {
             if (form.errors?.password) {
                 form.reset('password', 'password_confirmation');
-                passwordInput.value.$el.focus();
+                newPasswordInput.value.$el.focus();
             }
             if (form.errors?.current_password) {
                 form.reset('current_password');
@@ -79,7 +79,7 @@ const updatePassword = () => {
                 <InputText
                     required
                     id="password"
-                    ref="password-input"
+                    ref="new-password-input"
                     type="password"
                     v-model="form.password"
                     class="w-full"