fix(datepicker): improve focus handling and scroll position restoration in modal

This commit is contained in:
Matej Glasnák committed 2025-10-14 01:42:41 +02:00
1 parent 056b27b016
commit 61fc55d313
3 files changed
+77 -22

No files matched your search

@@ -3,6 +3,7 @@ export default {
data() {
return {
preventInputFocus: false,
savedScrollPosition: null,
};
},
@@ -20,18 +21,44 @@ export default {
},
onDateOpen($event) {
if ($event == undefined) {
// $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) {
setTimeout(() => {
if (this.preventInputFocus) {
$event.target.blur();
this.preventInputFocus = false;
// 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);
}
}, 100);
}
},
},
};