Problem with Custom Form-Field Table in Filament Resource Form

I need some help with an issue I'm facing in a Filament resource form where I need to include an editable table. I know I can add a relationship table at the bottom of the form, but the client requested that the table be part of the form itself.

To achieve this, I created a custom form field and embedded a Livewire component in the form-field Blade file that contains a table.

custom form-field in Resource Form:

CommentsField::make('comments')
  ->columnSpan('full')

CommentsField::make('comments')
  ->columnSpan('full')

form-field blade file:

@php
    $record = $field->getRecord();
    $id = $record ? $record->id : null;
@endphp

    
            @livewire('comments-table', ['blogId' => $id], key($id))

@php
    $record = $field->getRecord();
    $id = $record ? $record->id : null;
@endphp

    
            @livewire('comments-table', ['blogId' => $id], key($id))

Livewire table:

class CommentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public int $blogId = 0;

    public function table(Table $table): Table
    {
        return $table
            ->query(Comment::query()->where('blog_id', $this->blogId))
            ->columns([
                ...
            ])
...

class CommentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public int $blogId = 0;

    public function table(Table $table): Table
    {
        return $table
            ->query(Comment::query()->where('blog_id', $this->blogId))
            ->columns([
                ...
            ])
...

Everything seems to work, but I encountered two issues that I can't resolve:
1. In the table, actions like adding a new entry, editing, or deleting only work after the second click.
2. The "save" button of the parent resource form does not work when the table is part of the form. No error message appears; it simply doesn't respond.
It seems like the resource form is conflicting with the custom field's form.

I created a demo project with the source code here: https://github.com/csuriantal/form-field.

Has anyone experienced something similar or have any suggestions? I'd really appreciate any help, as I often miss having an editable table directly within a form. It would make managing more complex resources much easier. Thanks!

Problem with Custom Form-Field Table in Filament Resource Form

CommentsField::make('comments')
  ->columnSpan('full')

CommentsField::make('comments')
  ->columnSpan('full')

form-field blade file:

@php
    $record = $field->getRecord();
    $id = $record ? $record->id : null;
@endphp

    
            @livewire('comments-table', ['blogId' => $id], key($id))

@php
    $record = $field->getRecord();
    $id = $record ? $record->id : null;
@endphp

    
            @livewire('comments-table', ['blogId' => $id], key($id))

Livewire table:

class CommentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public int $blogId = 0;

    public function table(Table $table): Table
    {
        return $table
            ->query(Comment::query()->where('blog_id', $this->blogId))
            ->columns([
                ...
            ])
...

class CommentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public int $blogId = 0;

    public function table(Table $table): Table
    {
        return $table
            ->query(Comment::query()->where('blog_id', $this->blogId))
            ->columns([
                ...
            ])
...

Problem with Custom Form-Field Table in Filament Resource Form

Problem with Custom Form-Field Table in Filament Resource Form

Similar Threads

Similar Threads

Similar Threads