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

form

elements, because the action modal blade component [4] required for actions on custom components will render

form

form

elements. This breaks the main form actions because browsers will render them outside the parent form while trying to mitigate the nested

form

form

elements, thus leading to

$el.closest('form')

$el.closest('form')

on the form action button returning

null

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 />
<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