new bank entity add focus to bic input on mounted

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"

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>