Hide/Show Component/Section when tab is active

[jandomos]

Package

Panel builder

Package Version

v3.0

How can we help you?

I have two problems :
1- In the following form and I'm trying to hide the section component when the second tab is active or selected, but it seems that when switching between tabs the livewire is not re-rendering the form, so how can hide the section when a specific tab is active ?

2-As you can see the tab parameter in the URL is being shown with a prefix '-' and a suffix '-tab', how can control this ?

`
#[Url]
public ?string $tab = null;

public function form(Form $form): Form
{
	return $form
		->columns(2)
		->extraAttributes(['class' => 'fi-section-full-height'])
		->schema([
			Section::make()
				->compact()
				->columnSpan(1)
				->columns(2)
                ->hidden(fn($livewire) => $livewire->tab === '-tab2-tab')
				->schema([
					Select::make('timeframePreset')
						->columnSpanFull()
						->options(TimeframePreset::options())
						->default(TimeframePreset::CurrentYear->value)
						->live()
						->required(),

                    DateRangePicker::make('custom_date')
                        ->label('Datum')
                        ->disableRanges()
                        ->autoApply()
                        ->visible(fn (Get $get) => $get('timeframePreset') == TimeframePreset::CustomDate),
                ]),
            Tabs::make('Tabs')
                ->live()
                ->reactive()
                ->columnSpan(2)
                ->tabs([
                    Tabs\Tab::make('Tab1')
                        ->columnSpan(2)
                        ->schema([]),
                    Tabs\Tab::make('Tab2')
                        ->columns(2)
                        ->columnSpan(1)
                        ->schema([]),
                ])
                ->activeTab(1)
                ->persistTabInQueryString()

        ]);
}`

[leandrocfe]

try this

Section::make()
    ->schema([])
    ->visible(fn (Page $livewire): bool => $livewire->tab === '-tab1-tab'),
Tabs::make('Tabs')
    ->extraAlpineAttributes(['x-effect' => '$dispatch(\'update-tabs\', { tab: tab })'])
    ->tabs([
        Tabs\Tab::make('Tab1')
            ->schema([]),
        Tabs\Tab::make('Tab2')
            ->schema([]),
    ])
    ->activeTab(1)
    ->persistTabInQueryString(),

YourPage.php (Create, Edit..)

use Livewire\Attributes\On;
...

public $tab = null;

#[On('update-tabs')]
public function updateTabs($tab): void
{
    $this->tab = $tab;
}

[jandomos]

It works Perfect thank you !! what about the second problem ? why is the tabQueryStringKey value with suffix and prefix ?

example: if the tab name is test and key value is : ?tab=-test-tab