Files
jandl-taskmanager-app/app/src/plugins/tm@modal/_mixins/vuetify-fix-focus.ts
T

65 lines
1.8 KiB
TypeScript

export default {
// Mixin to fix autofocus on v-input in modals where date selects are used
data() {
return {
preventInputFocus: false,
savedScrollPosition: null,
};
},
methods: {
setFocusEvent() {
document.querySelectorAll('.v-autocomplete input').forEach((input) => {
input.addEventListener('focus', this.onInputFocus);
});
},
onDateFocus($event) {
if ($event == undefined) {
this.preventInputFocus = true;
}
},
onDateOpen($event) {
// $event should be the element reference (or any truthy value to trigger saving)
if ($event) {
// Find the scrollable modal container
const modalContent = document.querySelector('.v-dialog .modal-content');
if (modalContent) {
this.savedScrollPosition = modalContent.scrollTop;
}
this.preventInputFocus = true;
// Reset after datepicker is opened
setTimeout(() => {
this.preventInputFocus = false;
this.savedScrollPosition = null;
}, 500);
}
},
onInputFocus($event) {
// If we have a saved scroll position and an unwanted focus happened
if (this.preventInputFocus && this.savedScrollPosition !== null) {
const target = $event.target;
// Only intercept text input focus (autocomplete fields)
if (target.tagName === 'INPUT' && target.type === 'text') {
// Blur the focused element
setTimeout(() => {
target.blur();
const modalContent = document.querySelector(
'.v-dialog .modal-content',
);
if (modalContent && this.savedScrollPosition !== null) {
modalContent.scrollTop = this.savedScrollPosition;
}
}, 0);
}
}
},
},
};