flowbite

flowbite copied to clipboard

Describe the bug When using interactive tabs (https://flowbite.com/docs/components/tabs/#interactive-tabs) with Laravel Livewire and performing any action that interacts with the backend like wire:click="nothing", the tabs lose their styling and no content is visible. See attached screenshots.

May or may not be related to https://github.com/themesberg/flowbite/issues/721

To Reproduce Steps to reproduce the behaviour:

Livewire component

<?php

namespace App\Livewire\Orders;

use Livewire\Component;

class Tabs extends Component
{
    public function render()
    {
        return view('livewire.orders.tabs');
    }

    public function nothing() {
    }
}

Blade template for the component (code from https://flowbite.com/docs/components/tabs/#interactive-tabs, only added a link that calls the nothing() method)

<div>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

        <a href="#" class="text-white" wire:click="nothing">Perform empty action (nothing)</a>

        <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="default-tab"
                data-tabs-toggle="#default-tab-content" role="tablist">
                <li class="me-2" role="presentation">
                    <button class="inline-block p-4 border-b-2 rounded-t-lg" id="profile-tab"
                        data-tabs-target="#profile" type="button" role="tab" aria-controls="profile"
                        aria-selected="false">Profile</button>
                </li>
                <li class="me-2" role="presentation">
                    <button
                        class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                        id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab"
                        aria-controls="dashboard" aria-selected="false">Dashboard</button>
                </li>
            </ul>
        </div>
        <div id="default-tab-content">
            <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="profile" role="tabpanel"
                aria-labelledby="profile-tab">
                <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong
                        class="font-medium text-gray-800 dark:text-white">Profile tab's associated content</strong>.
                    Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps
                    classes to control the content visibility and styling.</p>
            </div>
            <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="dashboard" role="tabpanel"
                aria-labelledby="dashboard-tab">
                <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong
                        class="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</strong>.
                    Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps
                    classes to control the content visibility and styling.</p>
            </div>
        </div>
    </div>
</div>

Expected behavior Tabs look and work like they did before and show the content.

Screenshots Before click:

After click on

Desktop (please complete the following information):

• OS: MacOS (latest)
• Browser: Chrome (latest)
• Laravel 10 / Jetstream / TailwindCSS 3.1 / Flowbite 2.2

Thanks a lot for any help and also for the great work - Cheers!

Update: As soon as I click the first tab, the styles and content are back. Only works with the first tab though. So I wrote a very dirty workaround that click()s the first and then the originally active tab...