InitTE method doesn't reinitialize components in frameworks with routing (for example vue + vue-router)

[juujisai]

#1891

[smessmer]

Running into the same issue with the leptos framework when navigation between pages causes HTML elements to be deleted/created.

[juujisai]

@smessmer We are going to change the initTE method a little bit. Inside the second parameter we will be able to provide options, for example allowReinits. That should help with routing issues.

Example of usage:

    import { Datepicker, Input, initTE } from "tw-elements";
    initTE({ Datepicker, Input }, { allowReinits: true });

[smessmer]

I'm using the UMD setup, i.e. I don't call initTE explicitly. Will your changes still fix this?

[juujisai]

@smessmer UMD format also uses initTE method, but it's beeing called by default. If the method runs when your html is ready then it should work fine. Otherwise you would be able to call it again. For example:

import * as te from "tw-elements"       --- if needed

const componentList = {
  Input: te.Input,
  Timepicker: te.Timepicker,
};

te.initTE(componentList, { allowReinits: true });)

[smessmer]

oh so allowReinits would still require it to be called, I had thought it would automatically re-init whatever gets added to the DOM. Hm. Calling initTE on every DOM change is not easy to do in leptos. The route I described in the other issue of adding <script>new te.Input(document.getElementById("..."))</script> to every <input> element is more feasible but doesn't seem ideal either. Isn't there some way to automate this inside of Tailwind Elements?

[juujisai]

@smessmer In your case, initializing via JS seems to be the best option.

[hellyanggara]

initTE({ Datepicker, Input }, { allowReinits: true });

I was looking for this answer all over the place, thx a lot

they should put this in vue integration