Tabs with livewire 3 in laravel 11 and using wire:navigate option does not work

[kanigula162]

Hello,
I have used the Tabs component with laravel 11, at the time of using livewire 3 with its Tabs component and make use of the livewire wire:navigate option in any link or button, when accessing the new page, its Tabs component does not work, it stops making the tab change and does not mark any error. I can't find the problem and I don't know how to proceed to find a solution.

[iprzybysz]

Hi @kanigula162, please check if other components, such as Ripple, are also causing issues. Additionally, try reinitializing to see if it makes any difference - you might need to allow reinitialization using allowReinits option in initTWE method. Could you also specify which version you are referring to?

[kanigula162]

Hello,
The version of tw-elements is 2.0.0. (laravel 11 and livewire 3) I have tested the Ripple effects on buttons and images, they work correctly. I have also tried the allowReinits method in initTWE, but it doesn't work with Tabs. I tried just adding the Tabs component only, but it doesn't work with the livewire function mentioned above. Removing the wire:navigate from livewire the Tabs component works correctly, but with the wire:navigate I haven't found any way, it doesn't switch tabs (it doesn't get any error in the browser console either). The only thing I can tell you is that if I refresh the page, then the component works normally again, but if I access it from a link or button with the livewire option, Tabs stops working.

[iprzybysz]

While we're not Laravel Livewire specialists, it appears from the description below that components do mount and unmount in this framework. You might want to try mounting your component within the mounted methods, if such exist.

Livewire, a full-stack framework for Laravel, does mount and unmount components.
When a Livewire component is initialized, the mount method is called. This method is the place to put any logic that you need to run right before the component is rendered. This is similar to the created or mounted lifecycle hooks in Vue.js. You can pass parameters to the mount method from your blade file.

Here is also an example how to init Tabs via JS:

// Enable tabs via JavaScript (each tab needs to be activated individually):
const triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach((triggerEl) => {
  const tabTrigger = new Tab(triggerEl);

  triggerEl.addEventListener('click', (e) => {
    e.preventDefault();
    tabTrigger.show();
  });
});

// You can activate individual tabs in several ways:
const triggerEl = document.querySelector('#myTab a[href="#profile"]');
Tab.getInstance(triggerEl).show(); // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a');
Tab.getInstance(triggerFirstTabEl).show(); // Select first tab

[kanigula162]

Hello,

Thank you very much for the information, I have been doing some tests and it is quite possible that the problem is due to what you are saying. Thank you very much for the help provided, best regards.