FluentTextField correct binding without lagging

[shark0151]

Hi,
So I am trying to get the FluentTextField do some processing on the data and while it technically works, it lags horribly and misses keystrokes if typing fast.
I am wondering if I am doing something wrong or is it something internal that is preventing it from working as expected.
Our non-fluent implementation is as such and works:

<input type="@inputType" @bind:event="oninput" @bind:get="@Data" @bind:set="@OnTextInput" />

The OnTextInput is a simple task

private string? Data { get; set; };
private async Task OnTextInput(string? value)
{
    if (Data?.Equals(value) ?? false)
    {
        return;
    }
    Data = value;
    await Process();
}

And this is what I have tries so far with fluent. They all perform the same with the lag

<FluentTextField Immediate="true" @bind-Value:set="@OnTextInput" @bind-Value:get="Data"/>
<FluentTextField Immediate="true" Value="@Data" ValueChanged="OnTextInput"/>
<FluentTextField Immediate="true" @oninput="@((ChangeEventArgs e) => _ = OnTextInput(e.Value?.ToString()))" Value="@Data"

[vnbaaij]

Why not use @bind-Value and @bind-Value:after? You can do the equality check in the Process method (although Data and PreviousData will probably never be the same)

<FluentTextField Immediate="true" @bind-Value:set="@OnTextInput" @bind-Value:get="Data"/>
<FluentTextField Immediate="true" Value="@Data" ValueChanged="OnTextInput"/>
<FluentTextField Immediate="true" @oninput="@((ChangeEventArgs e) => _ = OnTextInput(e.Value?.ToString()))" Value="@Data" />

<FluentTextField Immediate="true" @bind-Value="@Data" @bind-Value:after="Process"/>

@code {
    private string? Data;
    private string? PreviousData;
    private async Task OnTextInput(string? value)
    {
        if (Data?.Equals(value) ?? false)
        {
            return;
        }
        Data = value;
        await Process();
    }

    private async Task Process()
    {
        // If the data has not changed do nothing
        // For the current case this seems a bit unnecessary
        // It only gous here if the value is bound ie when the data has changed
        if (Data?.Equals(PreviousData) ?? false)
        {
            return;
        }

        // otherwise handle the change
        await Task.Delay(1000);
        PreviousData = Data;

    }
}

Btw, I'm not seeing significant delays with any of the inputs but I don't know any details about how your code is running and rendering (server, wasm, SSR)

[shark0151]

It is SSR. I have tried now

@bind-Value="@Data" @bind-Value:after="Process"

Unfortunately it performs the same for me. I believe it is because of our component being too complex and blazor probably can't figure out that is shouldn't re-render everything. The text field in question is generated programmatically as part of a render fragment. I just can't quite figure how it works fine with the basic input.
But thanks for the reply and if you do have other suggestions they are much appreciated

[dvoituron]

Perhaps you can add the ImmediateDelay attribute so as not to send too many keystrokes to the server?

[shark0151]

I feel it sidesteps my particular issue. Running on a local server, I don't think it should have much of a delay. But in production, yes it is a good idea

[shark0151]

After digging, I have found the issue on our side. Some condition triggered unnecessary re-rendering of the parent component which then caused the FluentTextField to fully re-render which caused said lag