fix: Values does not get applied in FormElements

[MarvinKlein1508]

🐛 Bug Report

There is an error with Fluent form elements when they are being used in combination with OnValidSubmit. The values won't get applied to the models until the input loses it's focus.

This primarly happens when you submit a form by using Enter when a button of type submit is present in the form

💻 Repro or Code Sample

I created a short demo repository. https://github.com/MarvinKlein1508/FluentUI-Error-EditForms

1. Make a debug point in Home.razor line 28.
2. Enter something in the field and press enter to submit the form
3. See that values won't be applied to currently active element

When you use the button instead the values are there just as expected.

🤔 Expected Behavior

I would expect the values to be present in OnValidSubmit

😯 Current Behavior

Values only get applied after the input loses it's focus or after OnValidSubmit has run.

🔦 Context

This should only be relevant for any render mode besides SSR, since the form becomes posted here.

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[MarvinKlein1508]

You can set Immediate to true it will fix this behaviour for me. However I still this is a bug since normal InputText components do not behave like this.

[vnbaaij]

I'll take a look at the code you supplied.

In general, our input components don't actually change their value until focus is lost. The are wired to the @onchange event. Using Immediate changes it to use @oninput. So it does not look to be a bug per se(again, haven't looked at the code yet!). The fact that the built in components work differently does not make this a bug either. Not useful and confusing it definitely is.

[MarvinKlein1508]

@vnbaaij as far as I remember corretlcy 'InputText' uses onchange as well. But the values are present within 'OnValidSubmit'

[vnbaaij]

Yes, the value is indeed present with InputText in OnValidSubmit. I've been debugging it, but can't find what is causing the difference. I do not have more time available to spend on this part.

You can set Immediate to true it will fix this behaviour for me. However I still this is a bug since normal InputText components do not behave like this.

No, it is not a bug because InputText works like that. We never claimed anywhere that a FluentTextField is a drop in replacement for InputText and (should) work(s) exactly the like it.

I'm closing this as there is a workaround available with the Immediate option.