0
0
Fork 0

refs #7124 feat: autofocus without property

This commit is contained in:
Javier Segarra 2024-03-21 14:56:39 +01:00
parent b3a889e8f6
commit d7d83fd886
4 changed files with 40 additions and 2 deletions

View File

@ -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'],

32
src/boot/qformMixin.js Normal file
View File

@ -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();
}
});
}
},
};

6
src/boot/quasar.js Normal file
View File

@ -0,0 +1,6 @@
import { boot } from 'quasar/wrappers';
import qFormMixin from './qformMixin';
export default boot(({ app }) => {
app.mixin(qFormMixin);
});

View File

@ -108,7 +108,7 @@ async function search() {
</script>
<template>
<QForm @submit="search">
<QForm @submit="search" id="searchbarForm">
<VnInput
id="searchbar"
v-model="searchText"