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!
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!
