Header action of table open modal only after 2 (two) clicks about filament HOT 20 OPEN

Thanks to a generous individual, this issue has been donated to. That has allowed me to investigate a fix this morning.

Historically, we have told users that nesting tables within forms is not supported. HTML does not allow <form> elements to be nested, and since table actions use form elements, we need to teleport table modals out of the current form to be able to use them.

Now that Livewire's teleport feature is stable, we can give the fix another go. However, it is a bit of a risky change to make and could break some form components.

Therefore, I have made a pre-release: https://github.com/filamentphp/filament/releases/tag/v3.2.87-beta1

Please follow the release instructions linked above to test the feature, and report back to me if any of your modals do not behave correctly anymore.

from filament.

I'm noticing other bugs and I think this is happening because I'm nesting forms.

from filament.

You could publish the modals.blade.php in your app and keep updating as usual

from filament.

I have the same issue in a form with 2 tabs.
First tab is Form with fields, second tab is Livewire component with filament table.
In this table is header action with Modal Form.
First click on header action is without modal, but call to Livewire is there with status code 200 - OK

       "effects": {
                "returns": [
                    null
                ],
                "html": ... 
                "dispatches": [
                    {
                        "name": "open-modal",
                        "params": {
                            "id": "GMh3szo4sJH0brD1km1C-table-action"
                        }
                    }
                ]
            }

No JS errors in debugger.

Second click is OK with modal.

Form in Resource:

    public static function form(Form $form): Form
    {
        $columns = static::getFields('form');

        return $form
            ->schema([
                Forms\Components\Tabs::make()
                    ->tabs([
                        Forms\Components\Tabs\Tab::make(__('company.basic_info'))
                            ->schema($columns)
                            ->columns(static::getFormColspan()),
                        Forms\Components\Tabs\Tab::make(__('company.connected_customers'))
                            ->schema([
                                Forms\Components\Livewire::make('connected-customers')
                                    ->label(__('company.connected_customers'))
                                    ->component('connected-customers')
                                    ->columns(static::getFormColspan()),
                                ])

                    ])
                    ->columnSpanFull()
            ]);
    }

Livewire component:

<?php

namespace App\Livewire;

use App\Models\CustomerCompanyAssigns;
use App\Models\Customers;
use Filament\Forms\Components\Select;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Actions\Action;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;

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

    public function table(Table $table): Table
    {
        return $table
            ->query(CustomerCompanyAssigns::query()->with('getCustomersCustomer'))
            ->columns([
                TextColumn::make('getCustomersCustomer.full_name')
                    ->label(__('company.first_name'))
                    ->description(function($record){
                        return $record->getCustomersCustomer->email . ' / ' . $record->getCustomersCustomer->phone;
                    }),
                TextColumn::make('contact_person')
                    ->label(__('company.contact')),
                TextColumn::make('contact_person_email')
                    ->label(__('company.email')),
                TextColumn::make('contact_person_phone')
                    ->label(__('company.phone')),
                TextColumn::make('approved_at')
                    ->label(__('company.approved_at'))
                    ->formatStateUsing(function($state): string {
                        return $state ? 'success' : 'danger';
                    }),
                IconColumn::make('admin')
                    ->label(__('company.admin'))
                    ->boolean()
            ])
            ->filters([
                // ...
            ])
            ->actions([
                Action::make('approve')
                    ->icon('heroicon-o-check')
                    ->label('')
                    ->button()
                    ->color('success'),

                Action::make('decline')
                    ->icon('heroicon-o-x-mark')
                    ->label('')
                    ->button()
                    ->color('danger')

            ])
            ->headerActions([
                Action::make(__('company.connect_customer'))
                    ->form([
                        Select::make('customer_id')
                            ->label(__('company.customer_ref'))
                            ->options(Customers::all()->pluck('full_name', 'id'))
                            ->required(),
                    ])
                    ->icon('heroicon-o-plus-circle')
                    ->action(function (array $data, CustomerCompanyAssigns $assign):void {
                        // ...
                    })
            ])
            ->bulkActions([
                // ...
            ])
            ->searchable();
    }
    public function render()
    {
        return view('livewire.connected-customers');
    }
}

Filament Version
v3.2.88

Laravel Version
v11.10.0

Livewire Version
v3.5.0

PHP Version
PHP 8.3.7

from filament.

Hey @joao-antonio-gomes! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

from filament.

Thank you for providing reproduction steps! Reopening the issue now.

from filament.

Same issue here, in my case, I was experiencing this on a custom resource page. There are no tables on the page, but I am using header actions. I think this started happening in the past week or so.

from filament.

I spent a long time debugging this over the weekend, it turned out (in my case, anyway) the issues were caused by a single wire:transition on a nested Livewire component (unrelated to the parent component with the modals).

Everything was keyed correctly and I followed the docs exactly, but for some reason the moment the wire:transition element changed, Livewire lost track of the parent Filament component. The fix was as easy as removing wire:transition. Not sure if this helps you @joao-antonio-gomes but leaving it here in case anyone else is affected also.

from filament.

Hello,
I have the same problem
Modal is opening only on second click when inside another modal

from filament.

Hello,
I have the same problem, when i call filament tables in action component.

protected function getHeaderActions(): array
   {
       return [
           Actions\Action::make('Reload Packages')
               ->link()
               ->color('secondary')
               ->icon('mw-reload'),
           Actions\Action::make('Licenses')
               ->modal('licenses')
               ->modalSubmitAction(false)
               ->modalCloseButton(false)
               ->modalCancelAction(false)
               ->modalContent(view('marketplace::livewire.filament.admin.show-list-licenses'))
               ->link()
               ->color('secondary')
               ->icon('mw-licenses'),
       ];
   }

On first click in modal table actions it only reload list component and on a second click it works.

from filament.

Hi @danharrin , thanks for the fix, I just tested it and it work correctly. Great work ! Thanks.

from filament.

It mostly works great! But some custom components could be broken by this change, so I'm going to put it into v4 instead, which should be released in the next few months.

from filament.

it works, yes!

from filament.

@danharrin Can you release v4 beta with this fix and the other fixes from v3 ?

from filament.

Unfortunately not, it is currently too early and v4 is not documented enough, it would create hell to support users with.

from filament.

Ok, if you tag some experimental release i will be happy to report. This fix is important for me, so i will need to stick with some version with it.

from filament.

I encountered this issue today as well. This is my "stack":

Resource View Page (Orders)
-> Custom Widget with Filament Table (Invoices)
->-> Table Row Action is opening a modal with a custom blade View (Invoice modal)
->->-> Blade View Includes a Livewire Component with an InfoList
->->->-> Infolist has some Actions in it's Section Header.

The "double click"-issue occurs with my Section Header Actions

from filament.

Edit: it works

from filament.

@peter-mw interesting, because for me the fix from the beta worked fine 🤔

from filament.

Edit: it works !! I just haven't loaded the new blade properly

from filament.