AlpineJS acting weird

[lekevoid]

Hi !

I have discovered the NEAT stack recently thanks to a Redditor, and I'm thrilled about learning it in-depth. I'm having a hard time with the starter though. When I go on mobile, and I click on the burger menu on the top navbar, it display both icons (the burger and the X) on top of each other, but the menu doesn't unfold. If I pass isOpen into an element with x-html, it shows me false all the time, even when I click the burger menu icon. It never turns to true.

Here's my code from /src/_includes/partials/navbar.html. I didn't really change anything to it apart from the x-html="isOpen".

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

Here's my package.json. I didn't change anything to the starter pack other than upgrade alpinejs to version 3.8.1, I thought maybe it could help.

{
    "scripts": {
        "dev": "npm-run-all --parallel css eleventy browsersync",
        "start": "npm-run-all --parallel css eleventy browsersync",
        "eleventy": "eleventy --watch",
        "debug": "set DEBUG=* & eleventy",
        "css": "postcss src/static/css/tailwind.css --o _site/static/css/style.css --watch",
        "build": "cross-env NODE_ENV=production eleventy && cross-env NODE_ENV=production postcss src/static/css/tailwind.css --o _site/static/css/style.css",
        "browsersync": "browser-sync start --server '_site' --files '_site' --port 8080 --no-notify --no-open"
    },
    "devDependencies": {
        "@11ty/eleventy": "^0.12.1",
        "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
        "@tailwindcss/typography": "^0.3.1",
        "alpinejs": "^3.8.1",
        "browser-sync": "^2.26.14",
        "cross-env": "^7.0.2",
        "cssnano": "^4.1.10",
        "html-minifier": "^4.0.0",
        "js-yaml": "^3.14.0",
        "luxon": "^1.25.0",
        "npm-run-all": "^4.1.5",
        "postcss-cli": "^8.3.1",
        "prismjs": "^1.21.0",
        "tailwindcss": "^2.0.2"
    },
    "dependencies": {
        "autoprefixer": "^10.1.0",
        "eleventy-plugin-sass": "^1.2.0",
        "postcss": "^8.2.1"
    }
}

In fact, I just now tried something, the weirdest thing happened... I opened my localhost:8080 on two different browsers, Chrome and Firefox. When I click the burger icon in Chrome, it does what I described above in Chrome, but it opens the menu in Firefox ! And when I click the icon in Firefox, it "fails" in Firefox, but it opens in Chrome !

If it helps, I use Chrome 96.0.4664.110 and Firefox 96.0.2, on Windows.

Thank you for your help !

[lekevoid]

I'd like to add that the live demo seems to be having the same issue... I made a video to show what I'm seeing : https://imgur.com/a/Fq0lAOb

Thanks again !

[surjithctly]

Thanks for noticing this, It was worked well before. Not sure if it happened after the last merge.

Are you able to find the issue? I'm not able to look at it right now.

[lekevoid]

Hi ! Yes actually, I went to SO and they found the bug, it was the @click.away="isOpen = false" directive in the navbar being misplaced. https://stackoverflow.com/questions/70828204/neat-stack-starter-is-behaving-strangely/70830105#70830105

I did the change and it's now working on my side.

[surjithctly]

Thanks. I have updated the code. Also, I suggest you upvote and mark the SO answer as accepted.