initTEn not initialize correctly

[Phors-Stephen]

import { Datepicker, Input, initTE } from "tw-elements";

export default {

setup() {

onMounted(() => {

initTE({ Datepicker, Input });

}) here i use vue3 and i use tw-element beta3 but it error render input when the first time render it work but when i click to the other component and comeback to component that contain input tw-element it say like this ERROR
Cannot read properties of null (reading 'setAttribute')
TypeError: Cannot read properties of null (reading 'setAttribute')
at eval (webpack-internal:///./node_modules/tw-elements/dist/js/tw-elements.es.min.js:133:4536)
at il (webpack-internal:///./node_modules/tw-elements/dist/js/tw-elements.es.min.js:48:2829) help fix me please

[juujisai]

Hi! Are you using vue-router ? I see that going back to the route creates some issues. Whenever you experience this issue, you can try to initialize components with use of JS not data-attributes (so without the initTE method). For example

const myDatepicker = new Datepicker(
  document.getElementById("myDatepicker")
);

Checkout the api sections of your components:
https://tailwind-elements.com/docs/standard/forms/datepicker/#api-section-usage
https://tailwind-elements.com/docs/standard/forms/inputs/#docsTabsAPI

I have also added a task to take a closer look at initTE method and see what we can do about it.

[anyn1993]

I am having a similar issue with the Select component.

onMounted(() => {
initTE({ Select });
const searchStringSelect = document.querySelector("#" + props.id);
const searchStringSelectInstance = Select.getInstance(searchStringSelect);
});

Neither with the initTE or the JS getInstance method can I get the selects to work with a search box once the router performs a new visit, they only load correctly on an entire page refresh (F5).

[Phors-Stephen]

Thanks You. Now My code is work , the problem is tw-element beta3 so i change to beta2 it work normally .

[c-linse]

I can confirm that beta3 or 1.0.0-rc.1 leads to the same issue on angular with angular routes.

Going back to beta2 is also my current solution since I dont get the proposed snippet:

const myDatepicker = new Datepicker( document.getElementById("myDatepicker") );
working.

In my case it's about the Select and Input component from tw-elements. I suspect it is related to every component which relies on initTE({})

[jason-shi]

I am having a similar issue in my Next.JS project.... when use router to nav back...

[juujisai]

We are going to update the initTE method by allowing to set a second parameter where we will be able to provide options (for example allowReinits). That should help with routing issues where components are unmounted and then mounted again.

Example of usage:

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

[memiljamel]

Hi @juujisai, your suggestion is work. But I found a new problem, where the select component will duplicate x times the button is pressed.

We are going to update the initTE method by allowing to set a second parameter where we will be able to provide options (for example allowReinits). That should help with routing issues where components are unmounted and then mounted again.

Example of usage:

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

Here's the screenshot: