[SOLVED] Capture [SPACE] without jumping in Browser

Capture [SPACE] without jumping in Browser

I am using FluentUI for Blazor WASM in version 4.10.4.

I want to make my project navigatable by keyboard and I am using FluentUIs KeyCode to achieve this. The issue comes when trying to use the [SPACE] key. When I press it it is captured as desired (see code below) but also it is triggered the browsers default behavior (jumping in screen). I don't know how to disable the browsers default behavior when pressing [SPACE] key.

My code:

public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args)
{
    if (args.Key == KeyCode.Space)
    {
        _logger.LogInformation("[SPACE] pressed");
    }
}

How can I prevent the browsers default behavior (jumping in screen) when pressing the space-bar key? Is there maybe a way to achieve this when registering RegisterListener from injected IKeyCodeService?

Solution

@PRO pointed me to the right direction. The solution is to set event.preventDefault() on the JavaScript side.

The FluentUI KeyCode class exposes PreventDefault. When setting FluentKeyCodeProvider in MainLayout.razor you have to add it like this

<FluentKeyCodeProvider PreventDefault="true" />

But caution be advised: After setting this, you cannot open the Browser's development tools with Shortcuts like [F12] or [CTRL] + [SHIFT] + [I] anymore, but have to navigate there manually via menu.