Any way to retrieve the current active tab from a tabs form component?

[StaffCollab]

Package

Panel builder

Package Version

v3.2

How can we help you?

Hi everyone.

I need to get the current tab of my tab component when the create method runs.
But nothing really seems to work

    public ?array $data = [];

    #[Url]
    public ?string $tab;

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Tabs::make()->schema([
                    Tab::make('Single donation')
                        ->schema([
                            //
                        ])->columns(4),
                    Tab::make('Recurring donation')
                        ->schema([
                          //
                        ])->columns(4),
                ])->persistTabInQueryString()->id('donate')
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        dd( $this->tab, request()->query('tab) );
    }

Now this tab returns the default value but is not getting synced with the URL param, and the request()->query() is always null.
Any help is appreciated

[StaffCollab]

I have spent about 3 hours trying to figure this out in 20 different ways but without success.
Any help @zepfietje @danharrin or any other masters... I'm going off my mind already.

[danharrin]

No, this is not currently possible, the tab is stored in the Alpine component and not in Livewire

[StaffCollab]

Thanks for your help.

[danharrin]

BTW - the request query() does not work since the request is actually the Livewire /update endpoint and not the page you are currently visiting

[StaffCollab]

Thanks for the clarification. And by the way, I already figured it out using the #[Js] directive; it is not super efficient, but it works.

[dharen008]

i hope there will be a efficient way to do this even on Filament\Resources\Components\Tab;

[StaffCollab]

The final solution was to run some js within the filament class, so it should evaluate the query string while creating the form and fetch the current tab from it.

Here is the code.

    public ?string $tab;

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Tabs::make('tabs')
                    ->schema([
                        Tab::make('Single donation')
                            ->schema([
                                //
                            ]),
                        Tab::make('Recurring donation')
                            ->schema([
                                //
                            ]),
                    ])
                    ->persistTabInQueryString('tab')
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        $this->getActiveTab();


        dd($this->tab);
    }

    #[Js]
    public function getActiveTab()
    {
        $this->js(<<<JS
        let urlParams = new URLSearchParams(window.location.search);
        let tab = urlParams.get('tab');
        Livewire.dispatch('setTab', {tab});
    JS);
    }
    #[On('setTab')]
    public function setTab($tab)
    {
        $this->tab = $tab;
    }

There might be a better solution to call the js from the front end and then call the create() method via $wire. Still, as this form is loaded every time the page loads but is only executed occasionally, the extra round trip is not a big deal.

[JonathanVorich]

What would be the solution if my form method is static?

[zahista]

I am currently facing kinda similar issue. Is there any way how to change current tab apart from clicking the actual tab button? I am using basic anchor with tab in query string, but I hoped I could figure things out with just Livewire or Alpine.

[StaffCollab]

You can probably change the current tab with Alpine but not with Livewire because this is on the front end.
You shouldn't have a problem accessing the tabs via Alpine as this is just an Alpine property called tab, which equals the names you have for the tab.

[hasan-aftab]

$this->form->getLivewire()->tab

Easiest and most elegant method to fetch the current tab

[wdog]

I've solved using

 ->url(fn($livewire) => self::getUrl('edit', [$livewire->activeTab]))

ex.

 ->emptyStateActions([
                Action::make('create')
                    ->label(fn($livewire) => "Edit")
                    ->url(fn($livewire) => self::getUrl('edit', [$livewire->activeTab]))
                    ->icon('heroicon-m-plus')
                    ->button(),
            ])