Blazor asp.net server with FluentUI controls and events

Question

I have the UI done using below components (ref: here) FluentDataGrid, FluentComboBox, FluentTextField, FluentNumberField, FluentSwitch

In the UI, data grid has editable cells using form controls listed above. So, UI is something like below. This is a single row of FluentDataGrid with all the controls. Users can [add][remove] rows and controls getting added dynamically.

First issue is, Tabs doesn't work (even if I add tabindex). I would like users to [tab] and be able to navigate the controls in the grid. So I was thinking, If I can use onfocus for each of the controls, I can capture the current element (focused element) and then decide what's the next one should be when I press tab (using onkeydown) and then move to that control using JSRuntime.

onkeydown event fires without a problem

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
{
    if (args.Key == "Tab")
    {
        JSRuntime.InvokeVoidAsync("onTab", args);
    }
}

onfocus similar to above doesn't get fired

public void onfocus(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
{
    JSRuntime.InvokeVoidAsync("onFocus", args);
}

Any idea why this may be happening?