Missing flatpickr-input class due to vue removing dynamically added flatpickr-input class

[lk77]

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

[X] Bug report
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• flatPickr version : 4.6.13
• Vue.js version : 3.2.31
• Browser name and version : Chromium 117
• This package version : 11.0.3

Current behavior

At the start of the page the flatpickr-input class is present, but is removed by vue on value update

Expected behavior

The flatpickr-input class stays on the input after value update

Minimal reproduction of the problem with instructions

it's linked to a :class i have on the picker which add/remove a is-invalid class, it trigger a re-render of the component, which removes the flatpickr-input class because vue does not know about it

i have a reproduction url : https://vue-s86h7j.stackblitz.io
editor: https://stackblitz.com/edit/vue-s86h7j?file=src%2FApp.vue

at the start the background is green, which means the flatpickr-input class is present,
when choosing a date, the background should turn white which means flatpickr-input class was removed by vue when applying the custom class from :class

i think the flatpickr-input class should be added to the input in the render function here : https://github.com/ankurk91/vue-flatpickr-component/blob/main/src/component.ts

[ankurk91]

please search into old/similar issues

[lk77]

@ankurk91 i already did search into similar issues and came to the conclusion that there is still an issue currently, vue-flatpickr-component should apply the flatpickr classes on the input the way vue expect it, because the way flatpickr will apply the class (aka : self.input.classList.add("flatpickr-input"); ) will cause issues with vue.

And it's easily solvable by adding the class to the render function to make sure vue does not remove it.

https://stackblitz.com/edit/vue-qf5nv9?file=src%2FApp.vue

import flatPickr from 'vue-flatpickr-component';
let render = flatPickr.render;
flatPickr.render = () => {
  let el = render.call(flatPickr);
  el.ctx.attrs.class = 'flatpickr-input';
  return el;
};

the flatpickr classes will also be applied to the visible input but for me it's not an issue.