title: Blazor Bootstrap -- Dropdown does not close when click outside element
body: <p>In my Blazor Server app, I can't get the default Bootstrap dropdown behavior to work: I need the dropdown menu to disappear when I click anywhere outside the menu div.</p>
  <p>I tried <code>@onfocusout</code> but if I click inside of one of the form inputs and then click the menu div again, the menu div disappears. I want it to persist in this use case. I just want to have the dropdown menu disappear when I click anywhere <strong>other than</strong> the dropdown button or its menu &amp; corresponding menu contents.</p>
  <p>My code is below - I have removed some form elements to make it easier to skim.</p>
  <pre><code>&lt;div class=&quot;dropdown&quot;&gt;
      &lt;button class=&quot;btn btn-primary dropdown-toggle data-toggle=&quot;dropdown&quot; type=&quot;button&quot;
              id=&quot;userLoginMenuButton&quot; @onclick=&quot;(() =&gt; this.showUserMenu=!this.showUserMenu)&quot;&gt;
          &lt;span&gt;Click me!&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;userLoginMenu dropdown-menu dropdown-menu-right @(showUserMenu? &quot;show&quot;:&quot;&quot;)&quot; 
               @onfocusout=&quot;() =&gt; this.showUserMenu = false&quot; aria-labelledby=&quot;userLoginMenuButton&quot;&gt;
  
          &lt;form class=&quot;px-4 py-3&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;exampleDropdownFormEmail1&quot;&gt;Email address&lt;/label&gt;
                  &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;exampleDropdownFormEmail1&quot; placeholder=&quot;email@example.com&quot;&gt;
              &lt;/div&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Sign in&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
          &lt;AuthorizeView&gt;
              &lt;Authorized Context=&quot;Auth&quot;&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;&quot; @onclick=&quot;(() =&gt; Logout())&quot;&gt;Logout&lt;/a&gt;
              &lt;/Authorized&gt;
              &lt;NotAuthorized&gt;
                  &lt;a class=&quot;dropdown-item&quot; href=&quot;&quot; @onclick=&quot;(() =&gt; Login())&quot;&gt;Login&lt;/a&gt;
              &lt;/NotAuthorized&gt;
          &lt;/AuthorizeView&gt;
      &lt;/div&gt;
  &lt;/div&gt;
   
  @code{
  
      private bool showUserMenu = false;
  
      public async Task Logout()
      {
          await ((CustomAuthenticationStateProvider)AuthenticationStateProvider).MarkUserAsLoggedOut();
          NavigationManager.NavigateTo(&quot;&quot;);
      }
  
      private void Login()
      {
          NavigationManager.NavigateTo(&quot;/&quot;);
      }
  }
  </code></pre>