John Davidson

Message:

My issue, I have a table with Accounts in it and the last column is a livewire component. Currently I can click outside of this and it doesn't hide. The component itself is meant to be a clone of the Manage Account dropdown when logged in (using jetstream).

My code:
resources/views/livewire/account-menu-component.blade.php

<div>

    <div class=" focus:outline-none focus:border-gray-300 transition hamburger" wire:click="$toggle('showDiv')" title="Click to show menu">

        <i class="fa-2x fa fa-bars"></i>

    </div>

    @if ($showDiv)

    <div class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0 ring-1 ring-black ring-opacity-5 py-1 bg-white">

        <div class="block px-4 py-2 text-xs text-gray-400">

            {{ $account->name }}

        </div>

        <a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 "

           href="{{ URL::to( 'accounts/' . $account->id . '/edit' ) }}">Edit

        </a>

        <a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"

           href="{{ URL::to( 'accounts/' . $account->id . '/destroy' ) }}">Delete

        </a>

    </div>

    @endif

</div>

app/Http/Livewire/AccountMenuComponent.php

<?php



namespace App\Http\Livewire;



use Livewire\Component;



class AccountMenuComponent extends Component

{

    public $account;

    public $showDiv = false;



    public function render()

    {

        return view('livewire.account-menu-component');

    }



}

in the final td of the tables row in my index.blade.php file is @livewire( 'account-menu-component', ['account' => $value] ) where $value is the account data for the row itself.

If i click on the row outside this component(or on another row or if i click on another hamburger for another row) it remains open and the only way to close it is to click the hamburger icon again.

So how can i close this if I click outside this component and also when one of the anchors within it is clicked? I'd prefer a livewire solution rather than a javascript/jQuery example that would require adding id elements etc. The menu used by Jetstream while logged in behaves exactly as I require.

Any ideas?

thanks

Craig

---

My Answer:
To hide the menu component when clicking outside of it or when one of the anchors within it is clicked, you can use Livewire's built-in event listeners. Here's how you can modify your code to achieve this:

1. Add a click event listener to the document body in your livewire/account-menu-component.blade.php file:

html

@if ($showDiv)

{{ $account->name }}

Edit
Delete

@endif

2. Add the wire:click.outside directive to the outer div of the menu component. This directive will trigger the showDiv property to be set to false when clicking outside of the component.

3. Update the href attributes of the anchor tags to include the wire:click directive to set the showDiv property to false when one of the anchors is clicked:

html
Edit
Delete


With these changes, the menu component will now hide when clicking outside of it or when one of the anchors within it is clicked.