title: Can't detect click in parent element from child
body: <p>I am trying to create a table where when you click a row a dropdown shows up. I am able to detect the click fine. However, I want to be able to click anywhere else on the screen to go back to the non-editable version.</p>
  
  <p>The problem is that when I use @onfocusous, it only works if I click in the row but outside of the dropdown. I want to be able to click anywhere on the page that is not the dropdown to switch back.</p>
  
  <p>Here is the HTML I have.</p>
  
  <pre><code>&lt;td class="@(isDropdown == true ? "hide" : "")" @onclick="BeginEdit"&gt;
      This is a test
  &lt;/td&gt;
  &lt;td class="@(isDropdown == true ? "" : "hide")" 
  @onfocusout="StopEdit" id="dropdown" @onfocusout="StopEdit"&gt;
      &lt;div class="input-group input-group-sm mb-3"&gt;
          &lt;BlazoredTypeahead SearchMethod="search.blah"
                              @bind-Value="@variable"
                              EnableDropDown="true"
                              Debounce="500"&gt;
              &lt;SelectedTemplate Context="ctx"&gt;
                   @ctx
              &lt;/SelectedTemplate&gt;
              &lt;ResultTemplate Context="ctx"&gt;
                  @ctx
              &lt;/ResultTemplate&gt;
          &lt;/BlazoredTypeahead&gt;
       &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I'm guessing I need javascript to do this, but I have never used javascript or know how to use interop, so any help would be great.</p>