Auto-apply does not work when a flow is defined

[phuze]

Describe the bug When using a flow, auto-apply does not work if the user skips directly to the calendar.

To Reproduce Apply both auto-apply and flow props:

<template>
  <div>
    <Datepicker
      v-model="date"
      :flow="['year', 'month', 'calendar']"
      auto-apply
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>

Expected behavior For auto-apply to function as expected.

Screenshots

Desktop & mobile (please complete the following information):

• Browser [e.g. chrome, safari] Microsoft Edge Version 122.0.2365.52 (Official build) (64-bit)
• Library version [e.g. 3.0.0] "@vuepic/vue-datepicker": "^8.1.1"

[phuze]

I came across issue #583, in which identifies that we must also set partial-flow, when combining flow and auto-apply. Please consider updating the documentation to make note of this; ie:

[phuze]

Something else I've just noticed, when you apply a combination of auto-apply, flow and partial-flow, the calendar no longer closes as it normally does when using auto-apply.

I considered using the @update:model-value event along with the closeMenu method, but this relies on defining a component ref. This concept is difficult when you consider a scenario with a dynamic number of date selectors (ie: a user is adding additional items to a form or something, each item requiring a date selector).

<script setup>
  const mydate = ref(null);
  const closeCalendar = () => {
    if (mydate) { mydate.value.closeMenu() }
  }
</script>

<template>
  <div v-for="item in whatever" :key="item.id">
    <VueDatePicker
        :flow="['year', 'month', 'calendar']"
        auto-apply
        partial-flow
        @update:model-value="closeCalendar"
        ref="mydate"
    />
  </div>
</template>

How would I define refs ahead of time when there are a dynamic number of date selectors? Even then, how would I know which date selector the user actively has open, in order to close it? I was hoping we could do something like:

<template>
  <div v-for="item in whatever" :key="item.id">
    <VueDatePicker
        :flow="['year', 'month', 'calendar']"
        auto-apply
        partial-flow
        @update:model-value="($event) => {
          $event.closeMenu()
        }"
    />
  </div>
</template>

But the event only emits the selected date value, and not a reference to itself (calendar instance). That leaves me with having to pre-define a bunch of refs and hope it's enough to cover whatever the user is doing -- which is a terrible idea lol.

<script setup>
  const vuedates = ref([
    ref(null), ref(null), ref(null), ref(null),
    ref(null), ref(null), ref(null), ref(null),
    ref(null), ref(null), ref(null), ref(null),
  ])
  const closeCalendar = () => {
    vuedates.value.forEach(calendar => {
      if(calendar.value) { calendar.value[0].closeMenu() }
    })
  }
</script>

<template>
  <div v-for="(item, index) in whatever" :key="item.id">
    <VueDatePicker
        :flow="['year', 'month', 'calendar']"
        auto-apply
        partial-flow
        @update:model-value="closeCalendar"
        :ref="vuedates[index]"
    />
  </div>
</template>

I'm getting into territory that feels a bit "hacky", which doesnt feel right. Whats the best way to go about this?

[faizaaulia]

hi @Jasenkoo , it seems like bugged again. I try on https://vue3datepicker.com/props/modes-configuration/#partial-flow but after i pick a date, it closed directly, not open the time. Isn't should be open the time menu?

https://github.com/Vuepic/vue-datepicker/assets/21327758/4f59a0c8-4b33-4f25-9e7a-7b59e13df573