FluentTextField does not update model before form submit when using enter to submit

[MisterGoodcat]

🐛 Bug Report

When using the enter key to submit a form, a currently focused FluentTextField does not properly update the model before the form is submit. A standard InputText does this.

💻 Repro or Code Sample

<FluentTextField @bind-Value:get="@model.SomeString" @bind-Value:set="@model.SetSomeString"></FluentTextField>

Focus the text field, change value, hit enter, and observe the form is submit with the old model value.

<InputText @bind-Value:get="@model.SomeString" @bind-Value:set="@model.SetSomeString"></InputText>

Focus the text field, change value, hit enter, and observe the form is submit with the properly updated model value.

🤔 Expected Behavior

The FluentTextField should update its binding properly, in the same way as the standard InputText.

[vnbaaij]

Please supply a minimal reproduction for the issue (either something we can copy/paste or a repo link).

Hope you can understand it is too much work an too complicated for us to work on incomplete code like the two lines you submitted. We need to creat model, form, etc...

[MisterGoodcat]

Sure. Here's a minimal repro, just replace the content of "Home.razor" in a newly created project (4.2.1) with this:

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<EditForm Model="@this" OnValidSubmit="OnValidSubmit" FormName="MyForm">
    <FluentTextField @bind-Value="value"></FluentTextField><br />
    <InputText @bind-Value="value"></InputText><br />
    <FluentButton Type="ButtonType.Submit">Submit</FluentButton><br />
    <span>Submit message: @submitMessage</span>
</EditForm>

@code {
    private string value = "edit, then hit enter to submit";
    private string submitMessage = "";

    private void OnValidSubmit()
    {
        submitMessage = $"Submitted: {value}";
    }
}

You will see that if you replace the content of the FluentTextField with something like "abc", then hit enter, value still holds the old content in OnValidSubmit. It works as expected for the InputText component.

[vnbaaij]

Ok, thanks. Might take a few days before I take a look (🎄 break)

[dvoituron]

I don't know why (yet), but the FluentTextField updates its Binded value only at LostFocus (which is normal) but is not compatible with the Submit Return.

A (temporary) workaround might be to add an Immediate parameter. It's not acceptable in all cases, but perhaps in yours?

<FluentTextField Immediate @bind-Value="value"></FluentTextField>

[MisterGoodcat]

To me it was important to somehow prevent submitting outdated data. Luckily that problem went away when I had to add some async validation and removed the explicit submit type from the respective button for that. That way the form is not automatically submitted on enter anymore.

[vnbaaij]

Workaround provided. Original issue was solved in a different way.

[thebarrettlo]

Just want to note that the Immediate workaround given by @dvoituron does work for submitting a form by pressing "Enter" when focus remains in the text field, but does make the shown (and registered?) value of the field "jumpy" when many characters are inputted in quick succession. E.g., holding down 'a' in an Immedidate=true text field shows 'a' characters populating the field before "backtracking" and erasing the last few characters before continuing.

Recording-20240223_135146.mp4

It would be great if the values of bound fields were updated before submission so that "Enter" can be used without moving focus off the field and the shown value is submitted.

Edit: This is with SSR Blazor. The original issue shows a discrepancy between forms created with these Fluent components and a basic HTML form, where pressing Enter in a text field will correctly register the new value before submission. I (selfishly) think this issue should be revisited for the FluentTextField behavior to align with the native HTML behavior.

[kjkrum]

@vnbaaij The existence of a workaround is not a reason to ignore a bug.

[vnbaaij]

As maintainers of this repo, that is exactly our prerogative.

[kjkrum]

@vnbaaij Zero interest in quality. Got it.

[vnbaaij]

Lame and totally uncalled for.

You have NO idea how much time and energy we as maintainers are investing in this.

[kjkrum]

@vnbaaij How many devs have wasted their time and energy with this issue? Worse, how many devs have failed to notice this issue? This is a fairly serious bug. Got bigger problems? Fine. Backlog it, don't close it.

[vnbaaij]

How many devs have wasted their time and energy with this issue? Worse, how many devs have failed to notice this issue?

Judging from the interaction we got on this issue, not that many.

This is a fairly serious bug. Got bigger problems? Fine. Backlog it, don't close it

You don't have to tell us how to run our repo. And certainly not in that tone.

This is an upstream issue that we do not have control over and is undergoing significant changes at the moment. It is addressed by other open issues here (#1085, #1050).

[kjkrum]

@vnbaaij Neither of those sounds like the same issue. The workaround for #1050 of using a non-Fluent submit button does not address this issue.

FluentTextField does update the model, but only after the submit callback is called. As described by the OP, if you type "abc" and press enter the callback sees an empty string. If you then append "xyz" so the field contains "abcxyz" and press enter again, the callback sees "abc".

Imagine opening a form, updating a field, and pressing enter. Validation passes; the value that was there before must have passed. But the form is submitted with the old value and the database doesn't update.

I consider myself lucky to have noticed this bug within minutes the first time I ever tried to use a FluentTextField, and to only have lost one day to it. This is the kind of issue that will have developers and users ripping their hair out trying to figure out what happened, and possibly never tracing it back to this library.

[jbam-cgy]

@vnbaaij Having the same issue

[vnbaaij]

Neither of those sounds like the same issue. The workaround for #1050 of using a non-Fluent submit button does not address this issue.\n\nFluentTextField does update the model, but only after the submit callback is called. As described by the OP, if you type "abc" and press enter the callback sees an empty string. If you then append "xyz" so the field contains "abcxyz" and press enter again, the callback sees "abc".

Why won't you accept it when I say it is the same issue? A submit is being called when you press enter before anything else is done. This happens both with TextField as with TextArea. Everything that is described here by you again, happens because of that erroneous submit.

The issue originates from the FAST library (which is in the middle of a giant overhaul). We are tracking it in the other issues mentioned (open and labeled blocked)

[kjkrum]

@vnbaaij You yourself said those other issues are related to FluentButton and can be worked around by changing or removing FluentButton. This issue manifests without any use of FluentButton.

[vnbaaij]

Ok, fine. I'm done with this. Have a nice weekend.