Form Tab content gets misplaced
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
More details in https://github.com/mariusaustr/filamentphp-tabs-bug Any ideas would be much appreciated.
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:
I can not post actual code here due to message length restrictions, but it can be found here:
https://github.com/mariusaustr/filamentphp-tabs-bug/blob/main/app/Filament/Resources/UserResource.php
More details in https://github.com/mariusaustr/filamentphp-tabs-bug Any ideas would be much appreciated.
GitHub
GitHub - mariusaustr/filamentphp-tabs-bug: Repository to demo a bug...
Repository to demo a bug found with Laravel Filament v3 - mariusaustr/filamentphp-tabs-bug
GitHub
filamentphp-tabs-bug/app/Filament/Resources/UserResource.php at mai...
Repository to demo a bug found with Laravel Filament v3 - mariusaustr/filamentphp-tabs-bug
3 Replies
bump
bump
the problem here is that the hidden tab isn't in the dom and showing it is messing up alpine's dom diffiing.
Not sure if it's an actual bug or not the intended use of tabs.
Feel free to open an issue on Github if you think it's a bug though.
I would tend to use the visible method and not condition it based on selection