onfocusout runs before navigation trigger

Question

I am experiencing issues triggering a dropdown's navigation when working with onblur or onfocusout in blazor.

The razor page's HTML:

<div class="navbar-collapse d-md-inline-flex flex-md-row-reverse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item" @onmousedown="e => this.expandSubNavManage = true" @onfocusout="e => this.expandSubNavManage = false">
                <div class="dropdown">
                    <button class="dropdown-button" aria-labelledby="dropdownMenuButton">
                        <div class="nav-link dropdown-toggle @(expandSubNavManage ? "show" : "")" data-toggle="Manage" role="button" aria-haspopup="true" aria-expanded="false">Manage<SvgImage SvgType="SvgType.CaretDown"></SvgImage></div>
                    </button>
          @if (expandSubNavManage)
          {
            <div class="dropdown-menu" aria-labelledby="dropdownMenu" >
              <ul class="nav flex-column">
                <li class="btn-group" role="group" aria-label="btn-group-toggle">
                  <button type="button" class="btn btn-secondary focus" aria-pressed="true">District</button>
                  <button type="button" class="btn btn-secondary">Campus</button>
                </li>
                <li class="nav-item px-3">
                  <NavLink class="nav-link" href="District/Dashboard">
                    <span class="mr-2 svg-style">
                      <SvgImage SvgType="SvgType.Dashboard" SvgClass="svg-style"></SvgImage>
                    </span>
                    Dashboard
                  </NavLink>
                </li>
                <li class="nav-item px-3">
                  <NavLink class="nav-link" href="District/DataManagement">
                    <span class="mr-2">
                      <SvgImage SvgType="SvgType.Data" SvgClass="svg-style"></SvgImage>
                    </span>
                    Data Management
                  </NavLink>
                </li>
                <li class="nav-item px-3">
                  <NavLink class="nav-link" href="District/AutoPilot">
                    <span class="mr-2">
                      <SvgImage SvgType="SvgType.AutoPilot" SvgClass="svg-style"></SvgImage>
                    </span>
                    Auto Pilot
                  </NavLink>
                </li>
                <li class="nav-item px-3">
                  <NavLink class="nav-link" href="District/PerformanceTracker">
                      <span class="mr-2">
                        <span>
                          <SvgImage SvgType="SvgType.PerformanceTracker" SvgClass="svg-style"></SvgImage>
                        </span>
                      </span>
                      Performance Tracker
                  </NavLink>
               </li>
               <li class="nav-item px-3">
                  <NavLink class="nav-link" href="District/Tests">
                      <span class="mr-2 ">
                         <SvgImage SvgType="SvgType.Booklet" SvgClass="svg-style"></SvgImage>
                      </span>
                      Tests
                  </NavLink>
               </li>
            </ul>
         </div>
      }
      </div>
   </li>
</ul>

and @code section

@code{
  private bool expandSubNavManage;
}

Either onblur or onfocusout give me the same issue, it seems that it triggers the "on_" event before registering the navigation trigger. If I delete onfocusout and click a link, the links function. I have tried a solution using a delay, but our SM doesn't want to use this approach.

@code{
  private async Task OutFocusManage()
    {
        await Task.delay(50);
        this.expandSubNavManage = false;
    }
}

What I'm hoping is to have an eventlistener for my clicked navigation item to send me to a path. Please let me know if there is some way to do this without a forced DELAY.

Answer 1

It sounds like you need to add stopPropagation to keep the focus event from "propagating" up the hierarchy and hitting the event handler in your top li element too.

In the Microsoft docs example linked above, they show an example stopping the propagation for @onclick:

<div @onclick="OnSelectParentDiv">
    <div @onclick="OnSelectChildDiv" @onclick:stopPropagation="true">
        Child div that stops propagation when selected.
    </div>
</div>

In that example, the parent div's @onclick handler will NOT be hit.

You need to do the same thing - just with @onfocusout.

Your code on each NavLink would look something* like:

<NavLink class="nav-link" href="District/Dashboard" @onfocusout:stopPropagation="true">
    (your content here)
</NavLink>

*Disclaimer: Untested code

FYI - A similar piece of functionality you should probably be aware of is the "preventDefault" function. While this answer is for JS, the answer does a good job demonstrating the differences - the ideas still apply to the Blazor versions of these methods.