Dropdown close when click away
I have multiple dropdowns inside a collapsable element.
When the dropdown is opened and to prevent the collapse I've added stop propagation
The problem is that multiple dropdowns can now be opened. Is there a way of using Alpines click away to close the dropdown?
E.g
When the dropdown is opened and to prevent the collapse I've added stop propagation
x-on:click.stop="toggle"x-on:click.stop="toggle"The problem is that multiple dropdowns can now be opened. Is there a way of using Alpines click away to close the dropdown?
E.g
<div
x-data="{ isCollapsed: true }"
>
<div
x-on:click="isCollapsed = ! isCollapsed"
class="flex gap-2"
>
<x-filament::dropdown>
<x-slot name="trigger">
<x-filament::icon-button
x-on:click.stop="toggle"
x-on:click.away="close"
type="button"
icon="heroicon-o-book-open"
color="primary"
/>
</x-slot>
Example
</x-filament::dropdown>
<x-filament::dropdown>
<x-slot name="trigger">
<x-filament::icon-button
x-on:click.stop="toggle"
x-on:click.away="close"
type="button"
icon="heroicon-o-cog"
color="secondary"
/>
</x-slot>
Example2
</x-filament::dropdown>
</div>
<div x-show="! isCollapsed">collapsed</div>
</div><div
x-data="{ isCollapsed: true }"
>
<div
x-on:click="isCollapsed = ! isCollapsed"
class="flex gap-2"
>
<x-filament::dropdown>
<x-slot name="trigger">
<x-filament::icon-button
x-on:click.stop="toggle"
x-on:click.away="close"
type="button"
icon="heroicon-o-book-open"
color="primary"
/>
</x-slot>
Example
</x-filament::dropdown>
<x-filament::dropdown>
<x-slot name="trigger">
<x-filament::icon-button
x-on:click.stop="toggle"
x-on:click.away="close"
type="button"
icon="heroicon-o-cog"
color="secondary"
/>
</x-slot>
Example2
</x-filament::dropdown>
</div>
<div x-show="! isCollapsed">collapsed</div>
</div>