Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

FluentEditForm delayed data binding when pressing enter

$
0
0

I'm trying to use the Blazor FluentUIFluentEditForm and I seem to be running into a problem with when data binding occurs. If I click the submit button, the data is bound before the submit callback is called and everything works as expected. But if type something and press enter, the data is bound after the submit callback is called.

In other words, if I type "ABC" and press enter, the submit callback sees an empty string. If I then append "XYZ" so the field contains "ABCXYZ" and press enter again, the submit callback sees "ABC" - the value it should have seen on the previous submission.

I noticed that many of the sample forms on the aforementioned FluentUI demo page use a plain EditForm instead of a FluentEditForm, but that change alone does not solve my problem.

Here's a minimal repro. Am I doing something wrong? I'm using Microsoft.FluentUI.AspNetCore.Components 4.7.2.

@page "/form"<FluentEditForm Model="@Model" OnValidSubmit="@Submit"><FluentStack Orientation="Orientation.Vertical"><FluentTextField @bind-Value="@Model.Text" /><FluentButton Type="ButtonType.Submit">Submit</FluentButton></FluentStack></FluentEditForm>@if(Message != null){<div>@Message</div>}@code {    private InputModel Model { get; } = new();    private string? Message { get; set; }    private class InputModel    {        public string Text { get; set; } = "";    }    private void Submit()    {        Message = $"Submitted \"{Model.Text}\".";    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>