Components in Modal (Flyout variant) still interactable after closing

[pitbully]

When using a "flyout" variant of the modal component, the flux components inside the modal are still interactable when the modal is closed. They appear invisible but still overlayed on top of your UI. It also prevents components underneath from being interacted with.

<div class="flex justify-between w-[90vw]">
            <flux:modal.trigger name="test-flyout">
                <flux:button>Open Modal</flux:button>
            </flux:modal.trigger>
            <flux:button>Can't click me</flux:button>
        </div>
        <flux:modal name="test-flyout" variant="flyout">
            <flux:heading>Modal heading</flux:heading>
            <flux:select>
                <flux:option>Option 1</flux:option>
                <flux:option>Option 2</flux:option>
                <flux:option>Option 3</flux:option>
            </flux:select>
        </flux:modal>

[pitbully]

On further testing, it doesn't seem to be limited to the "flyout" variant. It seems to be a problem with all uses of "dialog". The dialog element stays interactable in the dom when not visible (when closed) and prevents clicking things beneath it.

[calebporzio]

Pasting in the code you provided works fine on my machine. Is it possible you have multiple modals on the same page with the same conflicting name?

[ju5t]

@calebporzio I can replicate this in a fresh install. Perhaps you need to run npm run build because of the w-[90vw]?

[pitbully]

I don't have multiple modals on the same page with the same conflicting name. Maybe this is a browser specific issue so here are a few more details.

Happens for me in both of these: Google Chrome Version 130.0.6723.92 (Official Build) (x86_64) Safari Version 17.0 (19616.1.27.211.1)

See how I can stil click in the spot where a select dropdown would be in the flyout and it still opens? When highlighting the dialog element in the browser inspector, I can see that it's still overlayed on my content. It is the element that gets focus when inspecting that area of the screen.

[pitbully]

@calebporzio A "closed" flyout modal is just being moved off screen, correct? transform: scale(1) translateX(50px);

The translateX(50px) is not enough to move it fully off screen. Maybe this is the culprit?

[jeffchown]

@pitbully I can't replicate the issue. When testing your code in my clean Flux test app everything works as expected

[ju5t]

@pitbully I've just tested it with an alert('test') and the button is clickable. Can you share an example where there's some functionality added to the button? Have you tried php artisan view:clear and npm run build to make sure everything is up to date?

[pitbully]

I'll set up an example with a fresh install to try to replicate and then share it here. I don't feel like I have customized anything that would make it an issue specific to my app but open to finding out that is the case.

[calebporzio]

Thanks for confirming @ju5t & @jeffchown

@pitbully, please re-open a new issue when you have code we can copy/paste to reproduce. Thanks!