Table of Contents

Class FocusTrap

Namespace
Dmnk.Blazor.Focus
Assembly
Dmnk.Blazor.Focus.dll

Prevents using the "Tab" key to escape the child components focus. This is mainly useful for dialogs, which should trap the focus while they are active.

For accessibility, you should ALWAYS provide a way to exit the focus trap, e.g. with a keyboard handler on the escape key.

This implemetation is essentially a port of MudFocusTrap.

public class FocusTrap : ComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Inheritance
FocusTrap
Implements
Inherited Members

Constructors

FocusTrap()

public FocusTrap()

Properties

AdditionalAttributes

[Parameter]
public Dictionary<string, object?> AdditionalAttributes { get; set; }

Property Value

Dictionary<string, object>

ChildContent

The content within this focus trap.

[Parameter]
public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Class

[Parameter]
public string? Class { get; set; }

Property Value

string

DefaultFocus

The element which receives focus when this focus trap is created or enabled.

[Parameter]
public FocusTrap.DefaultFocusT DefaultFocus { get; set; }

Property Value

FocusTrap.DefaultFocusT

Remarks

Defaults to FirstChild.

Disabled

Prevents the user from interacting with this focus trap.

[Parameter]
public bool Disabled { get; set; }

Property Value

bool

Remarks

Defaults to false.

Style

[Parameter]
public string? Style { get; set; }

Property Value

string

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

Dispose()

public void Dispose()

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A Task representing any asynchronous operation.

Remarks

The OnAfterRender(bool) and OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

ShouldRender()

Returns a flag to indicate whether the component should render.

protected override bool ShouldRender()

Returns

bool