NEAT Stack starter is behaving strangely - alpine.js

Question

I cloned and installed the NEAT stack starter. When I go on mobile mode with the devtools and try to click the burger menu in the top nav, it showed both the burger icon and the "X" superimposed, but the nav didn't appear.
Exploring further, I saw that if I open my localhost in different browsers, and I click on the burger icon on Chrome, the menu won't open in Chrome, but it'll trigger the proper change in the other browsers ! I made a video to showcase ; there I have Firefox, Chrome and Edge open side-by-side.
Steps to reproduce :
Clone and install the NEAT starter using their published instructions
Run npm run start
Open http://localhost:8080 in different browsers on mobile mode
Click on the burger menu on any browser and look at the other ones
This is the code of the navbar component containing the burger icon, if it helps...
<div class="flex w-full lg:w-64">
<nav class="flex items-center justify-center lg:justify-between flex-wrap p-6 lg:px-0 container mx-auto" x-data="{ isOpen: false }" #keydown.escape="isOpen = false">
<!--Logo etc-->
<div class="flex items-center">
<a href="/" class="text-indigo-500 font-bold text-lg" x-html="isOpen">
</a>
</div>
<!--Toggle button (hidden on large screens)-->
<button #click="isOpen = !isOpen" type="button" class="ml-auto block lg:hidden px-2 text-primary-500 hover:text-primary-500 focus:outline-none focus:text-primary-500" :class="{ 'transition transform-180': isOpen }" aria-label="Menu">
<svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path x-show="isOpen" fill-rule="evenodd" clip-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
<path x-show="!isOpen" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
</svg>
</button>
<!--Menu-->
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto text-center " :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" #click.away="isOpen = false" x-show.transition="true">
{% if navigation.items %}
<ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center">
{% for item in navigation.items %}
<li class="nav__item mr-3">
<a #click="isOpen = false" class="text-ml inline-block text-gray-500 no-underline hover:text-indigo-500 py-2 px-4" href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</nav>
</div>
I tried putting the alpine script tag in different places. I also tried inspecting the isOpen variable in the navbar component. (i.e.: <button #click=" isOpen = !isOpen; console.log(isOpen);" ... > If I log the value of isOpen right after clicking the burger menu, it aways returns false. Also, if I change :
<button #click="isOpen = !isOpen">¨
with :
<button #click="$nextTick(() => { isOpen = !isOpen; })>
Then when I click the burger icon, isOpen always logs true.
Thanks for any pointers you may have... I already opened an issue with the stack's maker, I'll see what they reply, because also it looks like their live demo is having the same issue (the mobile menu doesn't unfold)...

Answer 1

Yes, it has a bug, the #click.away="isOpen = false" directive inside the Menu's <div> element activates every time right away you click on the hamburger icon. It must be moved to the <nav> element.
The corrected navbar component:
<div class="{{ 'lg:fixed' if path == 'home' }} w-full">
<nav class="flex items-center justify-center lg:justify-between flex-wrap p-6 lg:px-0 container mx-auto" x-data="{ isOpen: false }" #keydown.escape="isOpen = false" #click.away="isOpen = false" >
<!--Logo etc-->
<div class="flex items-center">
<a href="/" class="text-indigo-500 font-bold text-lg">
Logo</a>
</div>
<!--Toggle button (hidden on large screens)-->
<button #click="isOpen = !isOpen" type="button" class="ml-auto block lg:hidden px-2 text-primary-500 hover:text-primary-500 focus:outline-none focus:text-primary-500" :class="{ 'transition transform-180': isOpen }" aria-label="Menu">
<svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path x-show="isOpen" fill-rule="evenodd" clip-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
<path x-show="!isOpen" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
</button>
<!--Menu-->
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto text-center " :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" x-show.transition="true">
{% if navigation.items %}
<ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center">
{% for item in navigation.items %}
<li class="nav__item mr-3">
<a #click="isOpen = false" class="text-ml inline-block text-gray-500 no-underline hover:text-indigo-500 py-2 px-4" href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</nav>
</div>