Modal does not open - Githubissues

amitsamtani commented 3 weeks ago

Issue:

Modals do not open. I believe there is something missing in my installation. In Calebs videos, modals are working perfectly well.

Steps to reproduce the issue:

Create a new application: laravel new flux
Starter kit: Laravel Breeze
Breeze stack: Livewire (Volt Class API) with Alpine
Database: SQLite
Install flux: composer require livewire/flux
Activate license: php artisan flux:activate
Add @fluxStyles and @fluxScripts to app.blade.php
Add stubs and Inter font to tailwind.config.js
Layout app.blade.php: use Inter font
Run: npm run dev
Login as a user
Layout app.blade.php: add a badge right after the {{ slot }} to see that flux components are rendering
Layout app.blade.php: add a button and modal right after the badge. The button renders perfectly well, but when you click on the button, the modal does not open

Complete tailwind.config.php

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
        "./vendor/livewire/flux/stubs/**/*.blade.php",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
        },
    },

    plugins: [forms],
};

Complete 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="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @fluxStyles
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
            <livewire:layout.navigation />

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white dark:bg-gray-800 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 }}

                <flux:badge color="lime">New</flux:badge>

                <flux:modal.trigger name="edit-profile">
                    <flux:button>Edit profile</flux:button>
                </flux:modal.trigger>

                <flux:modal name="edit-profile" class="md:w-96 space-y-6">
                    <div>
                        <flux:heading size="lg">Update profile</flux:heading>
                        <flux:subheading>Make changes to your personal details.</flux:subheading>
                    </div>

                    <flux:input label="Name" placeholder="Your name" />

                    <flux:input label="Date of birth" type="date" />

                    <div class="flex">
                        <flux:spacer />

                        <flux:button type="submit" variant="primary">Save changes</flux:button>
                    </div>
                </flux:modal>
            </main>
        </div>
        @fluxScripts
    </body>
</html>

amitsamtani commented 3 weeks ago

This seems like a duplicate issue to #245

amitsamtani commented 3 weeks ago

Closing this issue. Either one of @filljoyner's solutions provided in #245 works:

Wrapping the button and modal in a div with an x-data attribute or
Put an x-data attribute on the body

livewire / flux

Modal does not open #268

Issue:

Steps to reproduce the issue:

Complete tailwind.config.php

Complete app.blade.php