filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.39k stars 2.97k forks source link

Modal JS conflict in RelationManagers #14700

Open gregoryloichot opened 2 weeks ago

gregoryloichot commented 2 weeks ago

Package

filament/tables

Package Version

v3.2.122

Laravel Version

v11.30

Livewire Version

No response

PHP Version

PHP 8.2

Problem description

Let's say we have a relation manager with a custom column. In this column, we want to add a button that opens a modal window. This works when there are no actions in the relation manager (it is possible to open the modal window). If there are actions present (in Edit mode, for example) in the relation manager, then the modal window contained in the custom column no longer works.

If this Title Custom column is added in a table (not a relation manager), it works as expected (even in Edit mode).

Expected behavior

The modal window should open under all circumstances.

Steps to reproduce

  1. Clone the project.
  2. Go to /admin/articles/1 (View Mode) -> Click on buttons "Comment 1" and "Comment 2" : a modal is opened.
  3. Go to /admin/articles/1/edit (View Mode) -> Click on buttons "Comment 1" and "Comment 2" : nothing happens.

Reproduction repository (issue will be closed if this is not valid)

https://github.com/gregoryloichot/filament-modal-issue

Relevant log output

In edit mode, JS errors in the browser:

Alpine Expression Error: isOpen is not defined
Expression: "isOpen"
<div x-cloak="" x-show="isOpen">

Alpine Expression Error: isOpen is not defined
Expression: "isOpen"
<div class="fi-modal-close-overlay f…/50 dark:bg-gray-950/75" aria-hidden="true" x-show="isOpen" x-transition.duration.300ms.opacity="">

Uncaught ReferenceError: isOpen is not defined

Donate 💰 to fund this issue

Fund with Polar