[Blazor] Add focus and blur events to handle all child elements.

Is there an existing issue for this?

I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I’m trying to create a context menu that automatically hides once the menu has lost focus. Currently Blazor only exposes onblur and onfocus events which are bound to the element but not its children. This means that if an item within the menu is clicked, the onblur event is called for the parent menu which is not intended behaviour. The only way I can achieve this currently, is to use JSInterop which is undesirable.

Describe the solution you’d like

Two new events introduced: @OnFocusWithin & @OnBlurWithin. OnFocusWithin firing if any element in the element tree (the parent or any nested children) is focused. OnBlurWithin firing if all elements in the element tree (the parent or any nested children) are unfocused and any element within the tree is blurred.

Additional context

I don’t feel strongly about the event names.

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:8 (3 by maintainers)

Top GitHub Comments

3reactions

KristofferStrubecommented, Jan 17, 2022

Hey @KieranDevvs,

You can achieve this using the @onfocusin and @onfocusout events as they bubble up. @onfocus and @onblur specifically doesn’t bubble up.

Example:

<div tabindex="0" @onfocusin=@(() => Console.WriteLine("In")) @onfocusout=@(() => Console.WriteLine("Out")) >
    <button>SubElement 1</button>
    <button>SubElement 2</button>
</div>

0reactions

KieranDevvscommented, Feb 1, 2023

By using some strategic delays in your focus lost code you can set an intermediary variable which can be reviewed on the gained focus callback and that value can be adjusted appropriately. The delayed code will then recognize the updated intermediary value and act accoringly.
<div id="TheParentDivWithChildContent" tabindex="-1" @onfocusout="LostFocus" @onfocusin="GainedFocus">

async Task LostFocus(FocusEventArgs args)
    {
        Console.WriteLine("Lost Focus");
        Console.WriteLine("Triggering Closed");
        IsClosing = true;
        await Task.Delay(100);
        if (IsClosing)
        {
            Console.WriteLine("Continuing with Closed");
        }
    }

    void GainedFocus(FocusEventArgs args)
    {
        if (IsClosing) IsClosing = false;
        Console.WriteLine("Gained Focus");
    }
Using this I was able to not use any js

I used this method prior to posting this issue and found that it was quite janky. It would be much nicer to have Blazor support more DOM events, but with the JSModule feature in the later versions of .NET, it has made working around these kinds of problems far simpler.