Multiple instances of flat-pickr inside a single file component trigger unecessary onChange

[mrns]

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

• Vue.js version : 2.3.3
• Browser name and version : Chrome 61.0.3163
• This package version : 3.1.0

Current behavior

I have multiple instances of this flat-pickr component inside a single file component, each one mapped to a different v-model data property. Whenever I change any field in my custom component (even some others that are not faltpickr) all the flatpickr components emit the onChange event, eventhough their v-model values were not modified. I also tried mapping them to single data properties (startDate, endDate) that is, without using a nested structure such as filter.createdDate.start and the behaviour was the same.

Also, probably related to this issue, at some point I see several onChange events for each of the flat-pickr components. This suggests that the onChange is being registered multiple times and its handler stays in memory after the component is destroyed. If I have 4 flat-pickrs, I see 4 onChange events but at some point there will be 8 events and son on.

UPDATE: The second part of this issue where I mention multiple onChange being triggered is actually because I have other single file components that are not shown (v-show=false) whih in turn have flat-pickrs components inside, and they are all also triggering onChange. So this means that it seems like all flat-pickr instances are sharing the same onChange handler internally...that's the only explanation for both issues.

Expected behavior

The flatpickr components do not emit any event unless they are explicitly modified. Event handlers for onChange should not be duplicated.

Minimal reproduction of the problem with instructions

Here is a sample of how part of this form looks like, changing any field triggers an emit OnChange on all flat-pickrs.

          <div class="field">
            <h3 class="label">Date Created</h3>
            <div class="field dates">
              <div class="control">
                <flat-pickr v-model="filter.createdDate.start" :config="{static: true}" placeholder="Start date"></flat-pickr>
                <flat-pickr v-model="filter.createdDate.end" :config="{static: true}" placeholder="End date"></flat-pickr>
              </div>
            </div>
          </div>
          <div class="field">
            <h3 class="label">Wanted Date</h3>
            <div class="field dates">
              <div class="control">
                <flat-pickr v-model="filter.wantedDate.start" :config="{static: true}" placeholder="Start date"></flat-pickr>
                <flat-pickr v-model="filter.wantedDate.end" :config="{static: true}" placeholder="End date"></flat-pickr>
              </div>
            </div>
          </div>

[ankurk91]

@mrns
I will look into in.
Mean while you can try to update to v3.1.1.

Can you also try NOT to use inline config.

<!-- don't do this -->
<flat-pickr  :config="{static: true}">
<!-- do this instead -->
<flat-pickr  :config="someConfigVariable">

[ankurk91]

@mrns
Just published v3.1.2

Please let me know if you are still facing the issue.

[mrns]

Awesome, thanks @ankurk91! I first tried not using the static config first and it worked, I now use a data property instead and I see the input and onChange events only for the edited component which is correct. I will try the latest version as well and let you know.

<flat-pickr v-model="filter.completedDate.start" :config="flatPickrConfig" placeholder="Start date" @input="onDateChanged"></flat-pickr>

  data() {
    return {
      flatPickrConfig: { static: true }
    }
  }

[ankurk91]

Closing, feel free to re-open.