mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 22:39:34 +00:00
fix(datepicker): improve focus handling and scroll position restoration in modal
This commit is contained in:
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);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in new issue
Block a user