fix: FluentEditForm fields are non editable when wrapped in FluentTab and using version 4.7.2 about fluentui-blazor HOT 5 CLOSED

There is no ready to run reproduction code provided. Please supply us with reproduction code in the form of a project or repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will get closed automatically in 3 days

Help us to help you. Thanks

from fluentui-blazor.

ReproBlazorFluentUI.zip

Included a repro solution. Index.razor contains sample code above.
Change the FluentUI Components version to 4.7.2 to see the described issue.

If you need more info, please let me know. Thanks.

from fluentui-blazor.

I can't find what commit would have caused this behavior to change. In your (Bootstrap based) demo, removing the Tab works indeed. But trying that in our demo environment does not make it work.

What does work in both cases is removing the @onkeydown:preventDefault="true" and I'm not understanding why you would even want to have that on the (Fluent)EditForm. (FluentEditForm is just a thin wrapper for EditForm which only does something useful when used in combination with the Wizard component)

So, as there is a workaround by not using the @onkeydown, I'm closing this issue.

from fluentui-blazor.

OK, thanks for the information and investigation.

The EditForm gives me input validation before Submit. My reason for the @onkeydown was to prevent the OnSubmit to fire when the Enter key was pressed.

But perhaps there is another (and better) way to prevent that?

from fluentui-blazor.

Did some more research and found a way to prevent OnSubmit fire after Enter.
The @onkeydown:preventDefault does not work, but handling it yourself does.

public static class Form
{
    private static bool _allowSubmit = true; 

    public static void HandleKeyDown(KeyboardEventArgs args)
    {
        _allowSubmit = args.Key != "Enter";
    }

    public static bool AllowSubmit()
    {
        if (_allowSubmit) return true;
        _allowSubmit = true;
        return false;
    }
}

Usage: Set @onkeydown="Form.HandleKeyDown" on the EditForm and do this in Submit() handler: if (!Form.AllowSubmit()) return;

Btw, I love FluentUI, keep up the good work!

from fluentui-blazor.