title: Laravel 8 livewire hide menu component when task finished or page clicked outside of it
body: <p>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).</p>
  <p>My code:
  resources/views/livewire/account-menu-component.blade.php</p>
  <pre><code>&lt;div&gt;
      &lt;div class=&quot; focus:outline-none focus:border-gray-300 transition hamburger&quot; wire:click=&quot;$toggle('showDiv')&quot; title=&quot;Click to show menu&quot;&gt;
          &lt;i class=&quot;fa-2x fa fa-bars&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
      @if ($showDiv)
      &lt;div class=&quot;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&quot;&gt;
          &lt;div class=&quot;block px-4 py-2 text-xs text-gray-400&quot;&gt;
              {{ $account-&gt;name }}
          &lt;/div&gt;
          &lt;a class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 &quot;
             href=&quot;{{ URL::to( 'accounts/' . $account-&gt;id . '/edit' ) }}&quot;&gt;Edit
          &lt;/a&gt;
          &lt;a class=&quot;block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100&quot;
             href=&quot;{{ URL::to( 'accounts/' . $account-&gt;id . '/destroy' ) }}&quot;&gt;Delete
          &lt;/a&gt;
      &lt;/div&gt;
      @endif
  &lt;/div&gt;
  
  </code></pre>
  <p>app/Http/Livewire/AccountMenuComponent.php</p>
  <pre><code>&lt;?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');
      }
  
  }
  </code></pre>
  <p>in the final <code>td</code> of the tables row in my index.blade.php file is <code>@livewire( 'account-menu-component', ['account' =&gt; $value] )</code> where <code>$value</code> is the account data for the row itself.</p>
  <p>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.</p>
  <p>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.</p>
  <p>Any ideas?</p>
  <p>thanks</p>
  <p>Craig</p>