mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 06:20:21 +00:00
65 lines
1.8 KiB
TypeScript
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);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|