WIP: #7790 - Enable focus form #623
|
@ -0,0 +1,27 @@
|
|||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted: function () {
|
||||
const vm = getCurrentInstance();
|
||||
if (vm.type.name === 'QForm') {
|
||||
const that = this;
|
||||
this.$el.addEventListener('keyup', function (evt) {
|
||||
if (evt.key === 'Enter') {
|
||||
const input = evt.target;
|
||||
if (input.type == 'textarea' && evt.shiftKey) {
|
||||
evt.preventDefault();
|
||||
let { selectionStart, selectionEnd } = input;
|
||||
input.value =
|
||||
input.value.substring(0, selectionStart) +
|
||||
'\n' +
|
||||
input.value.substring(selectionEnd);
|
||||
selectionStart = selectionEnd = selectionStart + 1;
|
||||
return;
|
||||
}
|
||||
evt.preventDefault();
|
||||
that.onSubmit();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
|
@ -0,0 +1,54 @@
|
|||
export default {
|
||||
mounted: function () {
|
||||
// func
|
||||
const observer = new MutationObserver((mutations, observerInstance) => {
|
||||
try {
|
||||
// Login
|
||||
const inputsFormCard = document.querySelectorAll(
|
||||
'form.formCard input:not([disabled]):not([type="checkbox"])'
|
||||
);
|
||||
if (inputsFormCard.length) {
|
||||
// .focus();
|
||||
// observerInstance.disconnect();
|
||||
// return;
|
||||
focusFirstInput(inputsFormCard[0], observerInstance);
|
||||
}
|
||||
// VnNotes
|
||||
const textareas = document.querySelectorAll(
|
||||
'textarea:not([disabled]), [contenteditable]:not([disabled])'
|
||||
);
|
||||
if (textareas.length) {
|
||||
// textareas[textareas.length - 1].focus();
|
||||
// observerInstance.disconnect();
|
||||
// return;
|
||||
focusFirstInput(textareas[textareas.length - 1], observerInstance);
|
||||
}
|
||||
// if (!inputs || inputs.length === 0) return;
|
||||
const inputs = document.querySelectorAll(
|
||||
'form#formModel input:not([disabled]):not([type="checkbox"])'
|
||||
);
|
||||
const input = inputs[0];
|
||||
if (!input) return;
|
||||
// if (input.type === 'textarea' || input.form) {
|
||||
// AUTOFOCUS
|
||||
|
||||
focusFirstInput(input, observerInstance);
|
||||
// input.focus();
|
||||
// observerInstance.disconnect();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(this.$el, {
|
||||
childList: true,
|
||||
subtree: false,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
function focusFirstInput(input, observerInstance) {
|
||||
input.focus();
|
||||
observerInstance.disconnect();
|
||||
return;
|
||||
}
|
|
@ -1,30 +0,0 @@
|
|||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted: function () {
|
||||
const vm = getCurrentInstance();
|
||||
if (vm.type.name === 'QForm') {
|
||||
if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
|
||||
// TODO: AUTOFOCUS IS NOT FOCUSING
|
||||
const that = this;
|
||||
this.$el.addEventListener('keyup', function (evt) {
|
||||
if (evt.key === 'Enter') {
|
||||
const input = evt.target;
|
||||
if (input.type == 'textarea' && evt.shiftKey) {
|
||||
evt.preventDefault();
|
||||
let { selectionStart, selectionEnd } = input;
|
||||
input.value =
|
||||
input.value.substring(0, selectionStart) +
|
||||
'\n' +
|
||||
input.value.substring(selectionEnd);
|
||||
selectionStart = selectionEnd = selectionStart + 1;
|
||||
return;
|
||||
}
|
||||
evt.preventDefault();
|
||||
that.onSubmit();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
|
@ -1,5 +1,6 @@
|
|||
import { boot } from 'quasar/wrappers';
|
||||
import qFormMixin from './qformMixin';
|
||||
import qFormEnterEvent from './qFormEnterEvent';
|
||||
import qFormFocus from './qFormFocus';
|
||||
import keyShortcut from './keyShortcut';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import { CanceledError } from 'axios';
|
||||
|
@ -7,7 +8,8 @@ import { CanceledError } from 'axios';
|
|||
const { notify } = useNotify();
|
||||
|
||||
export default boot(({ app }) => {
|
||||
app.mixin(qFormMixin);
|
||||
app.mixin(qFormEnterEvent);
|
||||
app.mixin(qFormFocus);
|
||||
app.directive('shortcut', keyShortcut);
|
||||
app.config.errorHandler = (error) => {
|
||||
let message;
|
||||
|
|
Loading…
Reference in New Issue