Is it Possible to Open a Modal within Another Modal in Laravel Filament?
Hello Filament Community,
I am working on a project using Laravel Filament, and I came across a situation where I need to open a second modal inside an already opened modal. In other words, I want the user to be able to trigger a second modal from within the first modal and have both modals function independently of each other.
What I am trying to achieve:
Open a primary modal form.
Place a button inside the primary modal.
When the button is clicked, it should open another modal (secondary modal) inside the first one.
I am curious if Filament natively supports opening nested modals. If not, what would be the best way to achieve this, or any recommended workarounds?
Solutions I've Tried:
Using Livewire to Trigger Modals: I created both modals as Livewire components and tried to use JavaScript to trigger the second modal via a button click inside the first one. I attempted to use Livewire.on() to open the second modal via JavaScript, but encountered issues with styling and focus management for the nested modals.
Manually Handling the Modals with JavaScript: I tried manually opening the second modal by removing the Tailwind CSS classes (like hidden) to make it visible. However, this approach felt a bit messy and led to some complexity.
My Questions:
Does Filament support opening one modal inside another out of the box?
If not, what would be the recommended way to implement this (for example, do I need to use JavaScript or Livewire customizations)?
Has anyone faced a similar requirement, and how did you handle it?
I would greatly appreciate any suggestions or guidance. Thank you in advance!
2 Replies
Did you read through this section? https://filamentphp.com/docs/3.x/actions/modals#opening-another-modal-from-an-extra-footer-action
Not sure this fully answers your question, but yes you can have layers of modals.
TL;DR using the default functions I have it go from: RELATION MANAGER -> MODAL1 -> MODAL2 -> MODAL1 -> RELATION MANAGER
In my case I have:
1. The user clicks a relation manager row that opens MODAL1 so they can edit it.
2. One of the form elements uses createOptionForm() that opens MODAL2 allowing the user to create a new institution record.
3. When The user clicks save on the institution creation model it transitions back to MODAL1 with the institution field automagically selecting the newly created record.
4. The user then clicks save on MODAL1 to save and return back to the relation manager.
Hope that makes sense?