Form Tab content gets misplaced
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 [email protected]: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: [email protected] + 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?
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too