Form Tab content gets misplaced

[mariusaustr]

Package

filament/filament

Package Version

v3.2.96

Laravel Version

v10, v11

Livewire Version

v3.5.4

PHP Version

PHP 8.2 & 8.3

Problem description

I have got an issue with a form builder. My form consists of multiple tabs with where various tabs and/or form elements get shown/hidden depending on live form data. I have noticed, that last tab content gets misplaced depending on form input states.

Even though the original problem I had was on a real project, where we have quite a complex form, I have managed to reproduce it using simplified sample form. I am not sure whether it is Filament bug, Livewire bug or just an user error. I hope you can share your thoughts.

I have created a fresh repository https://github.com/mariusaustr/filamentphp-tabs-bug where you can clone it down, follow steps in readme.md to set the project up, view more unexpected behaviour screenshots & reproduce the bug (?). Since the bug can be reproduced in fresh repository, I think cache or out of date dependencies are out of question.

The Problem:

• When you check 2 live() checkboxes in Details tab, the form element from the last tab gets displayed in the bottom of every tab.
• When you uncheck those 2 live() checboxes - the last tab form component goes missing

Expected behavior

I would expect the tab content to be properly shown regardless of what the form state is.

Steps to reproduce

• git clone git@github.com:mariusaustr/filamentphp-tabs-bug.git

• cp .env.example .env

• composer install

• php artisan key:generate

• php artisan migrate --seed

• php artisan serve

• Navigate to http://localhost:8000/admin (or any other URL if php artisan serve provides different port)

• Login using credentials: test@example.com + password (Defined in DatabaseSeeder)

• Navigate to Users section & press New User to get redirected to Create User form.

• You will see multiple tabs, where form elements are displayed as expected.

• In Control Tab check any of Available checkboxes & then check Option 2 of the same category

• [BUG] Confirm content from last tab is shown in the bottom of every tab. In the last tab it looks like padding disappears - This should not happen

*

• [BUG] If you uncheck the Option 2 checkbox you have just checked, the content from the last tab disappears completely from all tabs, even the last one - This should not happen either

Reproduction repository (issue will be closed if this is not valid)

https://github.com/mariusaustr/filamentphp-tabs-bug

Form definition

public static function form(Form $form): Form
    {
        $categories = [
            'Category1',
            'Category2',
            'Category3',
        ];
        
        $modelData = [];
        foreach ($categories as $category) {
            $modelData[$category] = [
                'available' => false,
                'option_1' => false,
                'option_2' => false,
            ];
        }

        return $form
            ->schema([
                Tabs::make('Tabs')
                    ->columnSpanFull()
                    ->tabs([

                        Tab::make('Control')
                            ->schema(
                                collect($modelData)
                                    ->mapWithKeys(fn (array $data, string $category) => [
                                        $category => Fieldset::make($category)
                                            ->columns(3)
                                            ->schema(
                                                (new Collection($data))
                                                    ->mapWithKeys(function ($value, $key) use ($category) {
                                                        return [
                                                            $key => Forms\Components\Checkbox::make("categories.{$category}.{$key}")
                                                                ->hidden(fn (Get $get): bool => $key !== 'available' && ! $get("categories.{$category}.available"))
                                                                ->default($value)
                                                                ->live(condition: in_array($key, ['available', 'option_2']))
                                                        ];
                                                    })
                                                    ->toArray()
                                            ),
                                    ])
                                    ->toArray()
                            ),

                        Tab::make('Hidden Dummy Tab 1')
                            ->hidden(fn (Get $get): bool => (new Collection($get('categories')))
                                    ->filter(fn (array $data) => $data['available'])
                                    ->filter(fn (array $data) => $data['option_2'])
                                    ->isEmpty()
                            )
                            ->schema([
                                Fieldset::make('Dummy fields of conditionally hidden tab')
                                    ->schema([
                                        Forms\Components\TextInput::make('www.up'),
                                    ]),
                            ]),

                        Tab::make('Empty Dummy Tab 3')
                            ->schema([
                                Fieldset::make('Hidden Dummy fields')
                                    ->hidden(fn (Get $get): bool => (new Collection($get('categories')))
                                        ->filter(fn (array $data) => $data['available'])
                                        ->filter(fn (array $data) => $data['option_2'])
                                        ->isEmpty()
                                    )
                                    ->schema([
                                        Forms\Components\TextInput::make('abc.def'),
                                    ]),
                            ]),

                        Tab::make('Dummy Tab 4')
                            ->schema([
                                Fieldset::make('Dummy fieldset from last tab')
                                    ->schema([
                                        Forms\Components\Checkbox::make('todo.check'),
                                    ]),
                            ]),
                    ]),
            ]);
    }

Is it something I am doing wrong? or is his a bug?

[teammahrr]

even i m facing same issue? did u guys figure out

[giacomomasseron]

@mariusaustr tried in Filament v4 and it works correctly