Why Upgrading to Alpinejs 3.2 menu does noes not work? - alpine.js

Question

In Laravel 8 / Alpinejs 2.8 app I had toggle menu like
<!--Toggle button (hidden on large screens)-->
<button
#click="isOpen = !isOpen"
type="button"
class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
:class="{ 'transition transform-180': isOpen }"
>
<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"
:class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
#click.away="isOpen = false"
x-show.transition="true"
>
<ul
class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center"
>
<li class="mr-3">
and it worked ok.
Upgrading to Alpinejs 3.2 modified
#click.away="isOpen = false"
with #click.away="isOpen = false"
with
#click.outside="isOpen = false"
and
x-show.transition="true"
into
x-show="true"
x-transition
but after that drop down menu is not visible at all.
Why so and how it can be fixed?
MODIFIED # 1:
If to change x-show="isOpen" for menu then yes, on small devices menu works as expected, but
on big devices it is not visible at all
I need somehow to set init value to true on big devices. Condition :
x-show="isOpen"
md:x-show="true"
x-transition
does not work
I think I can use package https://github.com/jenssegers/agent to get this value depending on current device.
Are there better decision?
Could you please explain how devtools were usefull in this debugging?
Thanks!

Answer 1

If you check it in devtools it is actually works as expected when you toggle isOpen state. The problem is when you click button it is also considered as click.away out of menu. I'll suggest to set this click on a parent element. Also I change menu settings - x-show set to isOpen like x-show="isOpen" and toggle statement will handle visibility of element with Tailwind's visible class
<div
x-data="{ isOpen: false }"
#click.outside="isOpen = false"
>
<button
#click="isOpen = !isOpen"
type="button"
class="block lg:hidden px-2 text-gray-500 focus:outline-none"
:class="{ 'transition transform-180': isOpen }"
>
<svg
class="w-6 h-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="flex-grow w-full lg:flex shadow-3xl lg:items-center lg:w-auto"
:class="[ isOpen ? 'visible' : 'unvisible' ]"
x-show="isOpen"
x-transition
>
<ul
class="items-center justify-end flex-1 pt-6 lg:pt-0 list-reset lg:flex"
>
<li class="mr-3">Link 1</li>
<li class="mr-3">Link 2</li>
</ul>
</div>
</div>