filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.5k stars 2.98k forks source link

Form Tab content gets misplaced #13745

Open mariusaustr opened 3 months ago

mariusaustr commented 3 months ago

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:

Expected behavior

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

Steps to reproduce

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 commented 3 days ago

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