Filament•2y ago

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

2 Replies

LeandroFerreira•17mo ago

@click.outside="close" ?

gizmojoOP•17mo ago

Cheers but that's triggered for every click on the page and when the dropdown is not open it throws an error.

can't access property "setAttribute", t.trigger is null

From panel2.trigger.setAttribute("aria-expanded", false); from alpine-tooltip

Gaming

Programming

Dropdown close when click away