From d7d83fd886fedb8eb09f03fd49ae7bbd6a99b3ca Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 21 Mar 2024 14:56:39 +0100
Subject: [PATCH] refs #7124 feat: autofocus without property

---
 quasar.config.js                  |  2 +-
 src/boot/qformMixin.js            | 32 +++++++++++++++++++++++++++++++
 src/boot/quasar.js                |  6 ++++++
 src/components/ui/VnSearchbar.vue |  2 +-
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/boot/qformMixin.js
 create mode 100644 src/boot/quasar.js

diff --git a/quasar.config.js b/quasar.config.js
index 2d8289508..80ddc3759 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: ['i18n', 'axios', 'vnDate', 'validations'],
+        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar'],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],
diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js
new file mode 100644
index 000000000..37beda4f0
--- /dev/null
+++ b/src/boot/qformMixin.js
@@ -0,0 +1,32 @@
+import { QForm } from 'quasar';
+import { getCurrentInstance } from 'vue';
+
+export default {
+    inject: { QForm },
+    component: { QForm },
+    components: { QForm },
+    extends: { QForm },
+    mounted: function () {
+        const vm = getCurrentInstance();
+        if (vm.type.name === 'QForm')
+            if (![ 'searchbarForm'].includes(this.$el?.id)) {
+                let that = this;
+
+                // AUTOFOCUS
+                const elementsArray = Array.from(this.$el.elements);
+                const index = elementsArray.findIndex(element => element.classList.contains('q-field__native'));
+
+                if (index !== -1) {
+                    const firstInputElement = elementsArray[index];
+                    firstInputElement.focus();
+                }
+
+                // KEYUP Event
+                document.addEventListener('keyup', function (evt) {
+                    if (evt.keyCode === 13) {
+                        that.onSubmit();
+                    }
+                });
+            }
+    },
+};
diff --git a/src/boot/quasar.js b/src/boot/quasar.js
new file mode 100644
index 000000000..a8d9b7ad9
--- /dev/null
+++ b/src/boot/quasar.js
@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import qFormMixin from './qformMixin';
+
+export default boot(({ app }) => {
+    app.mixin(qFormMixin);
+});
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 143efcd0f..d86b02166 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -108,7 +108,7 @@ async function search() {
 </script>
 
 <template>
-    <QForm @submit="search">
+    <QForm @submit="search" id="searchbarForm">
         <VnInput
             id="searchbar"
             v-model="searchText"