[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.