[LiveComponent] Twig + AlpineJS x-data x-show

[disceney]

Hello,

I am encountering an issue with a TwigLiveComponent that integrates AlpineJS and a data-poll. Here’s an explanation of the problem:

Here is a code snippet:

<div class="relative" {{ attributes }} data-poll x-data="{ notificationDropdown: false }">
	<button @click="notificationDropdown = !notificationDropdown">
		Open
	</button>
	
	<div x-show="notificationDropdown" x-cloak @click.away="notificationDropdown = false">
		CONTENT
	</div>
</div>

The problem is that during the first data-poll, the CONTENT is displayed even though I haven’t clicked on the element. It works correctly for other AlpineJS elements that are not affected by a TwigLiveComponent. However, every time the DOM is rendered, the CONTENT appears as if the variable is set to true or as if the x-show attribute is being ignored.

Here’s what I’ve tried to solve the issue:

1. I tried moving the x-data attribute to a parent above the TwigLiveComponent to avoid placing it directly in the TwigLiveComponent.
2. I tried using a Stimulus controller to override the TwigLiveComponent, but it didn’t work.
3. I also tried using a props variable directly in the TwigLiveComponent, but that didn’t resolve the issue either.
4. I tried using x-init or other events and got the same result.

I also tried modifying the code like this:

<div class="relative" {{ attributes }} data-poll x-data="{ notificationDropdown: false }">
	<button @click="notificationDropdown = !notificationDropdown">
		Open
	</button>
	
	<div x-show="false" x-cloak @click.away="notificationDropdown = false">
		CONTENT
	</div>
</div>

I thought the notificationDropdown variable was causing the problem, but even after changing the first data-poll, the CONTENT still displays.

I am using AlpineJS version 3.14.9 and Symfony UX version 2.24 (including Twig, etc.).

I haven’t found a viable solution. Maybe I am trying to do something impossible or I am doing it wrong. I think the issue comes from the DOM changing with the first data-poll. I had already encountered this issue with a form managed by TwigLiveComponent, and I eventually gave up on that approach. However, I am determined to make this dropdown display method work.

Could you help me?

Thank you.

[disceney]

A small clarification that might be important.

When I load the page, x-show works correctly. However, after the first data-poll call, the DOM reloads and x-show stops working.

Curiously, if I close the page (without reloading it) using the features (which still work) and the data-poll is called again, I no longer have this problem.

[smnandre]

I would not mix two JS framework on the same div to be honest.

The DOM changes are the main feature of LiveComponent, so we won't be able to do much on that.

If you have any idea / solutions we could look at, but this does not look like a bug on LiveComponent side, did you open an issue / looked for support on the Alpine one ?

[disceney]

Hi !

I’ve changed my approach. Instead of using AlpineJS in a TwigLiveComponent, I opted for a Stimulus controller to manage my dropdown menu

For now, I haven’t found another solution, but I agree with you on this point. The issue probably doesn’t come from AlpineJS or TwigLiveComponent

The compatibility of both within the same DOM doesn’t seem to be a good practice

[smnandre]

Just by chance, did you try

<div class="relative" {{ attributes }} data-poll>
    <div x-data="{ notificationDropdown: false }">
        <button @click="notificationDropdown = !notificationDropdown">
            Open
    	</button>
    	<div x-show="false" x-cloak @click.away="notificationDropdown = false">
            CONTENT
    	</div>
    </div>
</div>

?

[blump]

A random ID on the element with your x-data should force Alpine.js to perform a fresh render (re-render) ;)