FilamentF
Filament2y ago
tg

Modal action or table inside form

My use case is a CRM application where each resource only has an edit screen. A list of related resources, each within a tab, should be rendered within the parent resource form. This is the center section in the attached screenshot below the Überblick“ heading, “Aktivitäten, “Jobs” etc. are said tabs. Please also note the action triggers + Notiz” to add a new note from a modal form, and the “bearbeiten” link action triggers to edit one of the listed notes. Basically standard table header + row actions, but

If I implement each tab with a Livewire component that uses Filament tables as documented [1], this will break the parent form submit button. I've read a bunch of threads and GitHub issues [1,2,3] about using Filament tables in forms. If I understand it correctly, the main issue is nested form elements, because the action modal blade component [4] required for actions on custom components will render form elements. This breaks the main form actions because browsers will render them outside the parent form while trying to mitigate the nested formelements, thus leading to $el.closest('form') on the form action button returning null instead of the resource form element. The same issue occurs when I add modal actions to a Livewire component, as they require <x-filament-actions::modals /> to work.

Questions and links in a self-reply to work around the character limit. Missing good old forums like Discourse

Thanks in advance 🙏
image.png
Was this page helpful?