From 860dbac6c6ac7ff4c17fc125ec98a1ffc8627240 Mon Sep 17 00:00:00 2001
From: Putra Fajar H <putrafajarh@gmail.com>
Date: Thu, 10 Apr 2025 00:10:26 +0700
Subject: [PATCH] fix: input focus on delete/change password

---
 resources/js/components/DeleteUser.vue   |  6 +++---
 resources/js/pages/settings/Password.vue | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/DeleteUser.vue b/resources/js/components/DeleteUser.vue
index 550610cb..d0c45ead 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 { useTemplateRef } 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 passwordInput = useTemplateRef('passwordInput');
 
 const form = useForm({
     password: '',
@@ -31,7 +31,7 @@ const deleteUser = (e: Event) => {
     form.delete(route('profile.destroy'), {
         preserveScroll: true,
         onSuccess: () => closeModal(),
-        onError: () => passwordInput.value?.focus(),
+        onError: () => passwordInput.value?.$el.focus(),
         onFinish: () => form.reset(),
     });
 };
diff --git a/resources/js/pages/settings/Password.vue b/resources/js/pages/settings/Password.vue
index f4c35c11..68f8f925 100644
--- a/resources/js/pages/settings/Password.vue
+++ b/resources/js/pages/settings/Password.vue
@@ -3,7 +3,7 @@ import InputError from '@/components/InputError.vue';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import { Button } from '@/components/ui/button';
@@ -18,8 +18,8 @@ const breadcrumbItems: BreadcrumbItem[] = [
     },
 ];
 
-const passwordInput = ref<HTMLInputElement | null>(null);
-const currentPasswordInput = ref<HTMLInputElement | null>(null);
+const passwordInput = useTemplateRef('passwordInput');
+const currentPasswordInput = useTemplateRef('currentPasswordInput');
 
 const form = useForm({
     current_password: '',
@@ -34,15 +34,15 @@ const updatePassword = () => {
         onError: (errors: any) => {
             if (errors.password) {
                 form.reset('password', 'password_confirmation');
-                if (passwordInput.value instanceof HTMLInputElement) {
-                    passwordInput.value.focus();
+                if (passwordInput.value?.$el instanceof HTMLInputElement) {
+                    passwordInput.value.$el.focus();
                 }
             }
 
             if (errors.current_password) {
                 form.reset('current_password');
-                if (currentPasswordInput.value instanceof HTMLInputElement) {
-                    currentPasswordInput.value.focus();
+                if (currentPasswordInput.value?.$el instanceof HTMLInputElement) {
+                    currentPasswordInput.value.$el.focus();
                 }
             }
         },