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
If you delete any of those 4 tabs, the issue disappears.
Form Definition:
https://github.com/mariusaustr/filamentphp-tabs-bug/blob/main/app/Filament/Resources/UserResource.php
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 => FormsComponentsCheckbox::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([
FormsComponentsTextInput::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([
FormsComponentsTextInput::make('abc.def'),
]),
]),
Tab::make('Dummy Tab 4')
->schema([
Fieldset::make('Dummy fieldset from last tab')
->schema([
FormsComponentsCheckbox::make('todo.check'),
]),
]),
]),
]);
}
More details in https://github.com/mariusaustr/filamentphp-tabs-bug
Any ideas would be much appreciated.