locked
OnEnter Event for a Blazor Components RRS feed

  • Question

  • User-343630552 posted

    I have several layers of nested Blazor components and need to detect when the user has moved focus to one of the input elements (<input>, <select>, etc) within the component and has moved focus out of the component.  I don't see OnEnter and OnLeave event handlers and the OnActivate and OnDeactivate ones don't seem to be firing for some reason.   I have tried putting @onactivate on both a <div> that wraps the component's other elements and even on a checkbox that I have shown via a console log does trigger the @onchange event.   So I'm looking for how to detect these events.  Any ideas?  Thanks. 

    Monday, July 20, 2020 6:05 PM

Answers

  • User475983607 posted

    You have to remember that you're code is running a browser.  There are several focus event that you can take advantage of; https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-3.1#event-argument-types.  Unfortunaetly, the event arguments do not provide the source of the event.  Design your components so that they are in an HTML wrapper.  then you can detect focus in and out.

    Components

    <span>LastName</span>
    <input name="lastName" type="text" />
    @code {
    
    }
    <span>FirstName</span>
    <input name="firstName" type="text" />
    
    @code {
    
    }
    @page "/focustest"
    <h3>FocusTest</h3>
    
    <div @onfocusin="GlobalFocusInHandler" @onfocusout="GlobalFocusOutHandler">
        <div @onfocusin="FirstnameComponentFocusInHandler" @onfocusout="FirstnameComponentFocusOutHandler">
            <FirstName />
        </div>
        <div @onfocusin="LastnameComponentFocusInHandler"@onfocusout="LastnameComponentFocusOutHandler">
            <LastName />
        </div>  
    </div>
    <div>
        <input type="button" value="Submit" />
    </div>
    
    @code {
        private void GlobalFocusInHandler(FocusEventArgs e)
        {
            Console.WriteLine("Global focus handler");
        }
        private void GlobalFocusOutHandler(FocusEventArgs e)
        {
            Console.WriteLine("Global focus handler");
        }
    
        private void FirstnameComponentFocusInHandler(FocusEventArgs e)
        {
            Console.WriteLine("Firstname Component Focus In Handler");
        }
        private void FirstnameComponentFocusOutHandler(FocusEventArgs e)
        {
            Console.WriteLine("Firstname Component Focus Out Handler");
        }
    
    
        private void LastnameComponentFocusInHandler(FocusEventArgs e)
        {
            Console.WriteLine("Lastname Component Focus In Handler");
        }
        private void LastnameComponentFocusOutHandler(FocusEventArgs e)
        {
            Console.WriteLine("Lastname Component Focus Out Handler");
        }
    }
    




     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 20, 2020 7:22 PM

All replies

  • User475983607 posted

    You have to remember that you're code is running a browser.  There are several focus event that you can take advantage of; https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-3.1#event-argument-types.  Unfortunaetly, the event arguments do not provide the source of the event.  Design your components so that they are in an HTML wrapper.  then you can detect focus in and out.

    Components

    <span>LastName</span>
    <input name="lastName" type="text" />
    @code {
    
    }
    <span>FirstName</span>
    <input name="firstName" type="text" />
    
    @code {
    
    }
    @page "/focustest"
    <h3>FocusTest</h3>
    
    <div @onfocusin="GlobalFocusInHandler" @onfocusout="GlobalFocusOutHandler">
        <div @onfocusin="FirstnameComponentFocusInHandler" @onfocusout="FirstnameComponentFocusOutHandler">
            <FirstName />
        </div>
        <div @onfocusin="LastnameComponentFocusInHandler"@onfocusout="LastnameComponentFocusOutHandler">
            <LastName />
        </div>  
    </div>
    <div>
        <input type="button" value="Submit" />
    </div>
    
    @code {
        private void GlobalFocusInHandler(FocusEventArgs e)
        {
            Console.WriteLine("Global focus handler");
        }
        private void GlobalFocusOutHandler(FocusEventArgs e)
        {
            Console.WriteLine("Global focus handler");
        }
    
        private void FirstnameComponentFocusInHandler(FocusEventArgs e)
        {
            Console.WriteLine("Firstname Component Focus In Handler");
        }
        private void FirstnameComponentFocusOutHandler(FocusEventArgs e)
        {
            Console.WriteLine("Firstname Component Focus Out Handler");
        }
    
    
        private void LastnameComponentFocusInHandler(FocusEventArgs e)
        {
            Console.WriteLine("Lastname Component Focus In Handler");
        }
        private void LastnameComponentFocusOutHandler(FocusEventArgs e)
        {
            Console.WriteLine("Lastname Component Focus Out Handler");
        }
    }
    




     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 20, 2020 7:22 PM
  • User-343630552 posted

    Somehow I missed the email about your reply.  Couldn't be any clearer.  Exactly what I was hoping to find.  Thanks so much.  Steve

    Wednesday, July 29, 2020 5:37 PM