update:modelValue is triggered twice with the same value when the date is selected

[stormik]

I'm submitting a ... (check one with "x")

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• flatPickr version : 4.6.13
• Vue.js version : 3.2
• Browser name and version : Chrome, Firefox
• This package version : 11.x.x

Current behavior update:model-value is triggered twice with the same value when the date is selected, probably because of emitting the event both onInput and onClose inside the component. It also fires when the picker is opened and closed without changing any data.

Expected behavior Model value should only be updated once and not when the value isn't changed.

Minimal reproduction of the problem with instructions Try to change the date in flatpickr and open console log in this jsFiddle: https://jsfiddle.net/nfL982qh/

Current workaround is to listen to onInput or onChange event only, but that makes it impossible to use v-model syntax.

[ankurk91]

What is issue with double event? I think it is fine.

[stormik]

If, for example, model value updates an object that is watched to perform some side effects, those runs twice too: https://jsfiddle.net/mLtywc8d/1/

[ankurk91]

You can supply your own list of events via events prop

<flat-pickr
                    v-model="date"
                    :config="config"
                    class="form-control"
                    :events="events"
                    placeholder="Select date"
                    name="date"/>

Here ate the default list of emitted events

'onChange',
  'onClose',
  'onDestroy',
  'onMonthChange',
  'onOpen',
  'onYearChange',

[Tiberiu96]

@ankurk91, what about the onDayCreated event? How can I control dates CSS with conditions