Header action of table open modal only after 2 (two) clicks

[joao-antonio-gomes]

Package

filament/filament

Package Version

v3.2.0

Laravel Version

v11.0

Livewire Version

v3.4

PHP Version

PHP 8.3.0

Problem description

I need to click a second time to modal open.
After the modal finally opens, the modal did not close if I click away (expected behavior), only if I click on close/cancel, it's nice!
But, if I try to open modal again (without refresh), now modal open on 1st click and close if I click away (I did not expect this behavior, I'm not using closeModalByClickingAway property
If I add the closeModalByClickingAway property, reload page and try to click away on 1st open, modal wont close

Expected behavior

Open modal after click once on action button header

Steps to reproduce

1. create a table with php artisan make:livewire-table UserTable --generate
2. will be added a table with columns, then add a header action and inside the header action a form
3. create a form with php artisan make:form-layout UserForm
4. on view who will be generated to UserForm, call User Table with:

<div {{ $attributes }}>
    @livewire(\App\Livewire\UserTable::class, ['record' => $getRecord()])
</div>

5. gerar um resource usando php artisan make:filament-resource User --generate
6. on generated resource, add the form as a View:

    public static function form(Form $form): Form {
        return $form
            ->schema([
                Tabs::make('Tabs')
                    ->tabs([
                        Tabs\Tab::make('New User')
                            ->schema([
                                View::make('forms.components.user-form')
                                    ->columnSpanFull(),
                            ])
                            ->columnSpanFull(),
                    ])
                    ->columnSpanFull(),
            ]);
    }

6. Access page http://localhost/users/create
7. Click on add user on header action button

If I put the table to a page, works like a charm, but inside a Tab on a form doesnt work.

2024-05-21.14-58-43.mov

Reproduction repository

https://github.com/joao-antonio-gomes/laravel-playground

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[github-actions]

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.

[github-actions]

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

[jackwh]

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.

[joao-antonio-gomes]

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

[jackwh]

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.

[peter-mw]

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

[bobimicroweber]

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.

[danharrin]

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.

[peter-mw]

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

[danharrin]

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.

[bobimicroweber]

it works, yes!

[peter-mw]

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

[danharrin]

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

[peter-mw]

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.

[danharrin]

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

[hamrak]

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

[lpeterke]

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

[peter-mw]

Edit: it works

[lpeterke]

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

[peter-mw]

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

[dbpolito]

I'm having a similar issue but i do get error on my console:

VM13123:21 Uncaught TypeError: Cannot read properties of undefined (reading 'dispatchEvent')
    at eval (eval at safeAsyncFunction (livewire.js?id=cc800bf4:1176:21), <anonymous>:21:43)
    at livewire.js?id=cc800bf4:1521:9
    at releaseNextTicks (livewire.js?id=cc800bf4:1529:24)
    at livewire.js?id=cc800bf4:1516:9

[peter-mw]

@danharrin the issue appears again in version 3.2.117

[peter-mw]

maybe as temporary solution you can add ->teleport() method to the current modal functionality until v4 is released , in order to make it work i had to replace modals.blade.php file again with this fe0cdd1

[danharrin]

I don't think I pushed anything to v3 to fix this in the first place.

[danielreales7]

Same here. How can we temporarily fix this until v4?

[yslinear]

@danielreales7 Try not to use preload within tables on the resource page. I tested this approach and it can solve the problem.

[liamseys]

I'm experiencing the same issue. Is there a current fix until V4 is released?

[OsRobert]

HI @danielreales7
I play around with that and I notice this problem dont show on nested forms when compoenent is loaded with lazy property

Forms\Components\Livewire::make(TestComponent::class)->lazy()

 @livewire('test-component',['lazy'=>true]))

Let me know if this work for you.