dotnet / dotnet/aspnetcore

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

Open
#39,561 16 comments 18 reactions 0 assignees View on GitHub
area-blazor enhancement Pillar: Complete Blazor Web
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

### Is there an existing issue for this?

- [X] 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.