From 912d54ea557d4c08ee582336bc413f6a26c61784 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 5 Mar 2024 11:03:07 -0300
Subject: [PATCH] new bank entity add focus to bic input on mounted

---
 src/components/CreateBankEntityForm.vue | 11 ++++++++---
 src/components/common/VnInput.vue       | 12 ++++++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index 0ad35490e..2d098beb0 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 
@@ -16,9 +16,8 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onDataSaved']);
-
 const { t } = useI18n();
-
+const bicInputRef = ref(null);
 const bankEntityFormData = reactive({
     name: null,
     bic: null,
@@ -35,6 +34,11 @@ const countriesOptions = ref([]);
 const onDataSaved = (formData, requestResponse) => {
     emit('onDataSaved', formData, requestResponse);
 };
+
+onMounted(async () => {
+    await nextTick();
+    bicInputRef.value.focus();
+});
 </script>
 
 <template>
@@ -64,6 +68,7 @@ const onDataSaved = (formData, requestResponse) => {
                 </div>
                 <div class="col">
                     <VnInput
+                        ref="bicInputRef"
                         :label="t('swift')"
                         v-model="data.bic"
                         :required="true"
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 8a01e0bee..ec836f2cd 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
@@ -17,7 +17,7 @@ const $props = defineProps({
 
 const { t } = useI18n();
 const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
-
+const vnInputRef = ref(null);
 const value = computed({
     get() {
         return $props.modelValue;
@@ -40,6 +40,14 @@ const styleAttrs = computed(() => {
 const onEnterPress = () => {
     emit('keyup.enter');
 };
+
+const focus = () => {
+    vnInputRef.value.focus();
+};
+
+defineExpose({
+    focus,
+});
 </script>
 
 <template>