Components that use js are not compatible with Livewire? Testing Select-search with livewire

[DaviMenezes]

https://tailwind-elements.com/docs/standard/forms/select/#search

After using wire:model without deferring, an event is called and all components that use javascript behaviors have their behavior broken.

before

after using wire:model in any component of the page ...
ex. typing anything in the simple input as <input type=text wire:model="model"/>
The layout of component crashes

Question: Components that use js are not compatible?

[rhmorlans]

I also have problems with these components. Livewire Full-page components work correctly with tailwind elements. However, if I try to insert a tailwind component inside a livewire component (like wire elements modal) does not work.

[juujisai]

Hard for me to help you with that. If I understand correctly the wire:model works similar to vue's v-model. Since TE is a vanilla JS package, to handle changes the best way would be to listen for the emitted events. For inputs, everytime something changes, we are emitting the input event. For selects, it's valueChange.te.select which is a CustomEvent.

Does the wire:model works for some of the components and for some not, or it's not working at all?

[MGeurts]

I have the exact same problem and don't know a solution or workaraund.

But I don't think it' related to using or adding wire:model.
I think the components are not being re-initialized after a Livewire request, as they were when the component was first initialiazed.

app.js

`import {
Collapse,
Datatable,
Datepicker,
Input,
Lightbox,
Modal,
Ripple,
Select,
Tab,
Toast,
Validation,
initTE,
} from "tw-elements";

initTE({
Collapse,
Datatable,
Datepicker,
Input,
Lightbox,
Modal,
Ripple,
Select,
Tab,
Toast,
Validation,
}, { allowReinits: true });`

[rhmorlans]

Thanks, but I tried it and the elements doesn't still work. It's a good point anyway.

[juujisai]

@MGeurts In other frameworks we are initializing components (via JS or via initTE method) inside lifecycle hooks - after component mounts. Maybe you could use the Lifecycle Hooks from livewire to resolve those issues?

https://livewire.laravel.com/docs/lifecycle-hooks

[MGeurts]

I followed the TE documentation for installing TE in LARAVEL, as stated in https://tw-elements.com/docs/standard/integrations/laravel-integration/.

Is there a better way to install TE when using LIVEWIRE in LARAVEL?

Thanks in advance.

[juujisai]

This tutorial is the only tutorial we have right now. Soon, we are planning to update most of them.

[MGeurts]

I found a solution for using TWE JS elements in Livewire components.

Wrap the element in <div wire:ignore></div> as stated in https://livewire.laravel.com/docs/wire-ignore.
This way the initial initialization will stay intact after Livewire requests.

Also remove wire:navigate from every hyperlink that routes to a page where TWE JS components are used.

[MGeurts]

While the above workaround is usable when using JS elements on minor pages or components in the application, it's a real problem when using JS driven elements in the main part (always visible) like for instance a top navigation bar. Livewire navigate becomes almost unusable in those situations.

There is a poll asking in what frameworkt TWE should be integrated. There are requests for LIVEWIRE (Alpine.js) and TALL (Alpine.JS). It would be realy nice if TWE would work 100% with both stacks.

The problem is always that TWE JS driven elements do not get reinitialized after Livewire updates certain elements in the DOM.

Thanks in advance.

[MaciejZimoch]

Hi All!
As this is a Livewire issue not a TWE one, our team cannot really speak to Livewire specific issues. As we are an open-source community: I will flag this here and I signalled the issue on our Discord. Maybe someone there is more Livewire savvy :)