diff --git a/src/boot/qFormEnterEvent.js b/src/boot/qFormEnterEvent.js new file mode 100644 index 000000000..c6ce6a7b8 --- /dev/null +++ b/src/boot/qFormEnterEvent.js @@ -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(); + } + }); + } + }, +}; diff --git a/src/boot/qFormFocus.js b/src/boot/qFormFocus.js new file mode 100644 index 000000000..0642e67a2 --- /dev/null +++ b/src/boot/qFormFocus.js @@ -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; +} diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js deleted file mode 100644 index fc7852369..000000000 --- a/src/boot/qformMixin.js +++ /dev/null @@ -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(); - } - }); - } - } - }, -}; diff --git a/src/boot/quasar.js b/src/boot/quasar.js index 01fe68d8b..3179e39dd 100644 --- a/src/boot/quasar.js +++ b/src/boot/quasar.js @@ -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;