Β© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filamentβ€’10mo agoβ€’
2 replies
Damorus

Nest Modal Needs Two Click To Open

I have a table whith an action on each record to open a modal (slideover) to view the record details.

The modal content is a custom livewire component and is called like this

Action::make('revisions')
  ->slideOver()
  ->modalContent(fn (Document $record) => view(
    'livewire.filament.components.document.revisions-modal-content', 
    ['document' => $record]
  )),
Action::make('revisions')
  ->slideOver()
  ->modalContent(fn (Document $record) => view(
    'livewire.filament.components.document.revisions-modal-content', 
    ['document' => $record]
  )),


This opens the slideover with the component just perfect! The component uses
InteractsWithTable
InteractsWithTable
and displays a table just fine πŸ™‚

Now that table again also have a table action on each record to preview an image.

Action::make('view-pdf')
  ->icon('heroicon-o-photo')
  ->label('Preview')
  ->infolist([...]),
Action::make('view-pdf')
  ->icon('heroicon-o-photo')
  ->label('Preview')
  ->infolist([...]),


I am using
->infolist([...])
->infolist([...])
to populate the popup.

This again is working just fine and is awesome! The slideover comes in and the nesten modal opens. Good stuff!

But! I always need to click two times the first time I want to preview a file after opening the slideover.

I open the slideover on a record, then if I click on the preview action I get this error in the console:

bash 
Uncaught TypeError: Cannot read properties of undefined (reading 'dispatchEvent')
    at eval (eval at safeAsyncFunction (livewire.js?id=df3a17f2:1174:21), <anonymous>:22:43)
    at livewire.js?id=df3a17f2:1527:9
    at releaseNextTicks (livewire.js?id=df3a17f2:1535:24)
    at livewire.js?id=df3a17f2:1522:9
bash 
Uncaught TypeError: Cannot read properties of undefined (reading 'dispatchEvent')
    at eval (eval at safeAsyncFunction (livewire.js?id=df3a17f2:1174:21), <anonymous>:22:43)
    at livewire.js?id=df3a17f2:1527:9
    at releaseNextTicks (livewire.js?id=df3a17f2:1535:24)
    at livewire.js?id=df3a17f2:1522:9


If I click it again, it workes! and any next preview action click I do in the same slideover also works on the first click. It is just that first click right after the slideover is opened.

If I close the slideover and open a new slideover, I still have to click two times on the first preview action.

Anyone have any ideas?
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel β€’ Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Open custom modal action on record click
FilamentFFilament / β“β”Šhelp
2y ago
Open modal when You click on a placeholder
FilamentFFilament / β“β”Šhelp
3y ago
recordUrl() to open Modal
FilamentFFilament / β“β”Šhelp
2y ago
open modal from another modal
FilamentFFilament / β“β”Šhelp
3y ago