dropdown click away does not work if you click another dropdown

[simonjcarr]

maryUI version

1.35

daisyUI version

4.12.10

Livewire version

3.5

What browsers are affected?

Chrome, Microsoft Edge

What happened?

This happens if you have more than one dropdown in the same component

1. Click one dropdown to open it
2. Click another drop down, now both dropdowns are open
3. Click away and both dropdowns close

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        @foreach ($designs as $design)
        <div class="min-h-[110px] bg-gray-100 dark:bg-gray-700 p-3 rounded shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-all duration-300 group">
            <div class="flex justify-between mb-2">
                <div class="text-xl font-semibold cursor-pointer" href="{{ route('designs.view', $design) }}" wire:navigate>{{ $design->name }}</div>
                <div class="flex-shrink-0" onclick="event.stopPropagation()">
                    <x-mary-dropdown class="btn-xs btn-primary px-1 text-gray-900 bg-white dark:bg-inherit border-none hover:bg-gray-300 dark:hover:bg-gray-500" icon="o-ellipsis-vertical" right>
                        <x-mary-menu-item title="Edit" icon="o-pencil" />
                        <x-mary-menu-item title="View" icon="o-eye" href="{{ route('designs.view', $design) }}" wire:navigate />
                        <x-mary-menu-item title="Delete" icon="o-trash" wire:click="confirmDelete({{ $design->id }})" />
                    </x-mary-dropdown>
                </div>
            </div>
            <a href="{{ route('designs.view', $design) }}" wire:navigate class="block">
                <div class="text-sm min-h-[40px]" title="{{ str($design->description)->limit(200) }}">{{ str($design->description)->limit(40) }}</div>
                <div class="flex justify-between text-gray-500 mt-2">
                    <div class="text-sm">{{ $design->user->name }}</div>
                    <div class="text-sm">{{ $design->updated_at->diffForHumans(['short' => true]) }}</div>
                </div>
            </a>
        </div>
        @endforeach
    </div>

[anfeichtinger]

I tried with your code, removing onclick="event.stopPropagation()" from the elements made it work for me.

[simonjcarr]

@anfeichtinger thankyou, and sorry for wasting your time will a silly mistake.