Filament Tab Refresh

Certainly! You want to refresh the Livewire components in the tab each time the tab is activated so that the content reloads, not just shown/hidden. Here’s how you can do it using Livewire's built-in events.

Step 1: Add Wire Keys to Components

Give a unique wire:key to each Livewire component in your tabs so Livewire can identify and re-render them when the key changes.

<div class="grid gap-6 sm:grid-cols-1 md:grid-cols-3" x-show="activeTab === 'profile'">
    @foreach ($this->getRegisteredCustomProfileComponents() as $i => $component)
        @unless (is_null($component))
            @livewire($component, [], key('profile-' . $i . '-' . $profileRefreshKey))
        @endunless
    @endforeach
</div>
<div x-show="activeTab==='company'">
    <livewire:company-info :key="'company-' . $companyRefreshKey" />
</div>

Step 2: Add Refresh Keys to Your Filament Page Class

In your Filament page component (ex: ProfilePage.php), manage a property for each tab to use as their "refresh key". (increment the key to force re-render):

public $profileRefreshKey = 1;
public $companyRefreshKey = 1;

protected $listeners = [
    'refresh-profile' => 'refreshProfile',
    'refresh-company' => 'refreshCompany',
];

public function refreshProfile()
{
    $this->profileRefreshKey++;
}

public function refreshCompany()
{
    $this->companyRefreshKey++;
}

Step 3: Dispatch Events on Tab Clicks

Update your x-on:click handlers to dispatch the appropriate event:

<x-filament::tabs>
    <x-filament::tabs.item
        alpine-active="activeTab === 'profile'"
        x-on:click="
            activeTab = 'profile';
            $wire.dispatch('refresh-profile');
        "
    >
        My Profile
    </x-filament::tabs.item>
    <x-filament::tabs.item
        alpine-active="activeTab === 'company'"
        x-on:click="
            activeTab = 'company';
            $wire.dispatch('refresh-company');
        "
    >
        My Company
    </x-filament::tabs.item>
</x-filament::tabs>

Summary

• Use wire:key on each tab’s Livewire component, referencing a refresh key counter.
• Each time a tab is clicked, dispatch a Livewire event to increment that tab’s key.
• When the key changes, Livewire will re-render the component—effectively "refreshing" the tab content.

---

Extra tip:
If you only want to fetch fresh data (not a full component re-render), use Livewire events to call a refresh or data-loading method on your components instead.
But for full re-mount/reload, keys are the best option.

Let me know if you need a full copy-paste code sample or have further questions!