x-collapse breaks @click.outside?

[StefanVesper]

Hi everybody,

i ran into some trouble with the new x-collapse directive, it does not work together with the click.outside.. as soon as I delete the @click.outside, it works fine. But I´d like to have the div closed as soon as the user clicks outside... is there a workaround fot this?

<div x-show="dropped" @click.outside="dropped = false"  x-collapse class=" loads of tailwind-css "> 
My Container Content
</div>

[SimoTod]

probably a race condition to sort out. If you add the stop modifier to the button that opens the dropdown, it should work
@click.stop="dropped = true"

[StefanVesper]

Hey,
thank you for your quick reply!
your solution works fine on some parts of my project, but on some other point I was using the bubbling of the "dropped"-state to close other open dropdowns. I think I have to use a global state or something.. sorry, I am new to alpineJS and still figuring things out. :-)

[StefanVesper]

I still can´t find a proper solution..
The problem is that in my special case (it is a navigation component) I seem to need the click event bubbling to make it affect all of my li-elements, each containing a div with x-show="open". When NOT using x-collapse and @click.stop it works fine. A click on any li-Element would reset the state in the other ones and they would close if open, except the one I clicked on.

I am working with handlebars, so the list and the div each get rendered from individual template files on the fly.
This is kind of what gets rendered in my project:

<li @click="dropped2 = !dropped2" x-data="{dropped2 : false}" :class="dropped2 ? 'bg-white text-blue-science' : ''" class="flex flex-col justify-center items-center w-full h-full px-4 text-white bg-blue-science lg:relative lg:h-16 lg:border-0 lg:left-0">
<div x-show="dropped2" @click.outside="dropped2 = false" x-collapse class=".............." > ///Content 1</div>
</li>
<li @click="dropped2 = !dropped2" x-data="{dropped2 : false}" :class="dropped2 ? 'bg-white text-blue-science' : ''" class="flex flex-col justify-center items-center w-full h-full px-4 text-white bg-blue-science lg:relative lg:h-16 lg:border-0 lg:left-0">
<div x-show="dropped2" @click.outside="dropped2 = false" x-collapse class=".............." > ///Content 2</div>
</li>
<li @click="dropped2 = !dropped2" x-data="{dropped2 : false}" :class="dropped2 ? 'bg-white text-blue-science' : ''" class="flex flex-col justify-center items-center w-full h-full px-4 text-white bg-blue-science lg:relative lg:h-16 lg:border-0 lg:left-0">
<div x-show="dropped2" @click.outside="dropped2 = false" x-collapse class=".............." > ///Content 3</div>
</li>

If i add the ".stop" to the @click of the list-elements, clicking on a different li-element opens the corresponding div, but the others will not close.

I tried to use events and listen to the event.taget when I click on a list-element and then hide the divs that are not within the target, but there´s always a missing state change. I think its my brain playing tricks on me..

could you please push me in the right direction?

[StefanVesper]

is there something like a "reset" that I could appy to list-elements that are not the event.target ?

[SimoTod]

Just to clarify, it's a defect in x-collapse which will be probably fixed eventually but in your case, why don't you move the click.outside on the li element?

[StefanVesper]

ah ok, thank you!
I moved the click.outside as you mentioned, it helps, thank you! But the component still behaves a bit strange. But I think I will wait for the fix and try again then..

Anyway, thanks for your reply!
Cheers
S