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

@@ -57,20 +57,26 @@
<div class="splitted-inputs">
<!-- TODO: Bialko validacie -->
<Datepicker
v-model="mastertask.deadline"
:auto-apply="true"
@focus="onDateFocus"
:min-date="new Date()"
class="modal-input left"
format="dd.MM.yyyy"
locale="sk"
select-text="Vybrať"
cancel-text="Zrušiť"
placeholder="Dátum"
:class="{ error: v$.mastertask.deadline.$errors?.length }"
:validations="v$.mastertask.deadline"
/>
<div
@click="handleDatepickerClick"
class="datepicker-wrapper left"
ref="datepicker-wrapper"
>
<Datepicker
v-model="mastertask.deadline"
ref="datepicker"
:auto-apply="true"
:min-date="new Date()"
class="modal-input datepicker-input"
format="dd.MM.yyyy"
locale="sk"
select-text="Vybrať"
cancel-text="Zrušiť"
placeholder="Dátum"
:class="{ error: v$.mastertask.deadline.$errors?.length }"
:validations="v$.mastertask.deadline"
/>
</div>
<v-text-field
class="modal-input right"
@@ -454,6 +460,14 @@ export default {
},
methods: {
handleDatepickerClick() {
// Pass the datepicker wrapper element reference to the mixin
const scrollTarget = this.$refs['datepicker-wrapper'];
this.onDateOpen(scrollTarget);
// Open the datepicker
this.$refs['datepicker'].openMenu();
},
closeBothModals() {
this.$emit('close');
this.visible = false;
@@ -770,4 +784,11 @@ export default {
:deep(.v-field__clearable)
opacity: 1 !important
.datepicker-wrapper
width: 100%
.datepicker-input
width: 100% !important
height: 100%
pointer-events: none
</style>