FilamentF
Filament•15mo ago
Sanchit Patil

Persist current tab while using Tabs Blade component

Hello,

I am using Tabs Blade component inside the filament panel page,

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>


Is there any way i can Persist the current tab in the URL's query string?

Thank you 🙂
Solution
For those who are looking for this solution,

There is no direct filament way to do this, you need some manual alpine to make this work.

in page class,

public function mount(int|string $record): void
{
    $this->record = $this->resolveRecord($record);
    
    //Add this code
    if (request()->has('tab')) {
        $this->activeTab = request('tab');
    }
}


in the view file,

<div class="rounded-lg lg:col-span-2" x-data="{
    activeTab: @entangle('activeTab'),
    updateUrl() {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', this.activeTab);
        history.pushState(null, '', url);
    }
}"
x-init="$watch('activeTab', () => updateUrl());">
Jump to solution
Was this page helpful?