Bootstrap Tabs with Livewire & Laravel [Solved]

“Bootstrap tabs not working properly with livewire.”

Actually, Few days back I designed a modal with bootstrap tabs. Then I faced this issue that bootstrap tabs were not working with livewire. 

See Also: Bootstrap date-picker with Laravel-Livewire

Why does bootstrap tabs navigation not working properly with livewire?

Because when you perform any livewire action on these tabs, Livewire updates the component’s html too and your selected tab will switch to the default active tab.

See, how these tabs navigation work? 

When we click on the tabs nav link, bootstrap js simply adds the “active” class to the nav link. 

Next it also adds the “active and show” class to a particular tab-pane. This way bootstrap switches your tabs.

So, here is the solution,

Simply add the wire:ignore to each nav-item and wire:ignore.self to a single tab-pane. This will prevent your tabs html to lose the active classes and switch to the default tab.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation" wire:ignore >
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation" wire:ignore >
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation" wire:ignore>
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" wire:ignore.self>...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" wire:ignore.self>...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" wire:ignore.self>...</div>
</div>

Hope you find this article useful. Please share your suggestions below in the comment section.

See you in the next article.

Reference : Ignoring DOM-changes (using wire:ignore)