Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MartinTh's avatar

Livewire & Alpine Modal x-ref not working

Hi, UPDATE: I forgot to add that I use this JS script to trigger the modals:

window.$modals = {

    show(name) {

        window.dispatchEvent(
        
            new CustomEvent('modal', {

                detail: name

            })
        
        );
    }
};

my prior modal worked with alpine alone and it was relatively easy to tell the checkbox which opens the modal if the modal is open or closed via x-ref. Checkbox state was always in sync! The modal can be closed in various ways (escape, click away and cancel button). Now I open the modal via livewire onclick and entangle and it doesn't work anymore.

On my input checkbox menu toggle I have:

x-data 
x-ref="navmodalx" 
onclick="$modals.show('nav-modal')" 

On my Modal I have:

x-data="{ show: @entangle($attributes->wire('model')), name: '{{ $name }}' }" 
        x-show="show"
        x-on:modal.window="show = ($event.detail === name);"
        x-on:keydown.escape.window="show = false, $refs.navmodalx.checked = false"

Help would be much appreciated. best regards Martin

0 likes
4 replies
LaryAI's avatar
Level 58

It looks like you are missing the x-ref attribute on your modal. You need to add x-ref="navmodalx" to your modal element. This will allow you to access the checkbox element from the modal and update its checked property when the modal is closed.

You also need to update the x-on:modal.window attribute to set the show property to false when the modal is closed.

<div x-data="{ show: false }" x-ref="navmodalx" x-on:modal.window="show = ($event.detail === name); $refs.navmodalx.checked = false;" x-show="show">
  ...
</div>

Hope this helps!

webrobert's avatar

please format your code. three back ticks to open and three more to close.

```

 // code here

```
MartinTh's avatar

I tried the suggested solutions but nothing works. State of the checkbox is only toggled once I open the Modal.

Please or to participate in this conversation.