powerGridScripts breaks Laravel Jetstream livewire modal close functionality

d2x commented 2 years ago

When using powergrid with Laravel Jetstream, the modal popup overlay wrapper doesn't get removed when a modal closes. I've narrowed this down to the @powerGridScripts but have not debugged this further.

This issue renders the entire site unusable after interacting with a modal until refreshing the page.

Versions:

laravel/framework v9.18.0 laravel/jetstream v2.8.5 power-components/livewire-powergrid v3.1.0

Step to reproduce:

Install Laravel: curl -s https://laravel.build/demo | bash
Bring up sail environment: cd demo && ./vendor/bin/sail up -d
Install jetstream: ./vendor/bin/sail composer require laravel/jetstream
Install Jetstream with livewire: ./vendor/bin/sail artisan jetstream:install livewire --teams
Install powergrid: ./vendor/bin/sail composer require power-components/livewire-powergrid
Install and build assets: npm install && npm run dev
Migrate database: ./vendor/bin/sail artisan migrate
Add @powerGridStyles and @powerGridScripts to resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        @livewireStyles
        @powerGridStyles

        <!-- Scripts -->
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        @stack('modals')

        @livewireScripts
        @powerGridScripts
    </body>
</html>

Now you can test this using the Team user role modal by inviting a user, and changing their role:

Now register and you'll be logged in automatically: http://0.0.0.0/register
Visit Team Settings page: http://0.0.0.0/teams/1
Add a Team Member by entering their email and selecting a role, then press Add
In a separate / incognito browser, register using the same email address as the user you added: http://0.0.0.0/register
Visit mailhog at http://0.0.0.0:8025/ and use the accept invite link in the incognito or separate browser.
In your original admin account, refresh the http://0.0.0.0/teams/1 page and click the role name next to the invited team member.
On the role change modal, click cancel or change the role and hit save. The page is now unusable until refresh because the invisible modal overlay wrapper wasn't properly removed on close.

If you comment out the @powerGridScripts from resources/views/layouts/app.blade.php, this issue does not occur and Jetstream modals function properly.

luanfreitasdev commented 2 years ago

Thank you very much for this description and how to reproduce it. However, the error is related to Alpine's dual startup since it was installed via Jetstream,

The error that happens in the console is this:

To fix it set 'null' in alpine_cdn in livewire-powergrid.php config

'alpinejs_cdn' => null,

`

d2x commented 2 years ago

@luanfreitasdev thank you very much. That does indeed solve the problem.

Power-Components / livewire-powergrid

powerGridScripts breaks Laravel Jetstream livewire modal close functionality #487