src/pages/Customer/Card/CustomerUnpaid.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, onBeforeMount, ref, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -15,6 +15,7 @@ const route = useRoute();
 const { notify } = useNotify();
 const stateStore = useStateStore();
 
+const amountInputRef = ref(null);
 const initialDated = Date.vnNew();
 const unpaidClient = ref(false);
 const isLoading = ref(false);
@@ -96,6 +97,14 @@ const onSubmit = async () => {
         isLoading.value = false;
     }
 };
+
+watch(
+    () => unpaidClient.value,
+    async (val) => {
+        await nextTick();
+        if (val) amountInputRef.value.focus();
+    }
+);
 </script>
 
 <template>
@@ -131,12 +140,13 @@ const onSubmit = async () => {
                     </div>
                 </VnRow>
 
-                <VnRow class="row q-gutter-md q-mb-md" v-if="unpaidClient">
+                <VnRow class="row q-gutter-md q-mb-md" v-show="unpaidClient">
                     <div class="col">
                         <VnInputDate :label="t('Date')" v-model="dated" />
                     </div>
                     <div class="col">
                         <VnInput
+                            ref="amountInputRef"
                             :label="t('Amount')"
                             clearable
                             type="number"