Blazor Wasm does not honor binding if previous value is a part of the new value for textarea when using oninput

[roysurles]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Blazor Wasm does not honor binding if previous value is a part of the new value for textarea when using oninput

Expected Behavior

I expect the textarea to render the new value.

Steps To Reproduce

1. Start new Blazor Wasm project (.Net 6 or .Net 7)
2. Copy the following code into Index.razor
3. type "12345" into the first textarea
   3a) the textarea renders "12345" instead of "1234" even though the underlying value is "1234"
4. type "12345" into the second textarea
   4a) the textarea renders the correct value of "abcd", but if you keep typing the same result of the textarea occurs

<div class="row">
    <div class="col">
        <br />
    </div>
</div>

<div class="col">
    <textarea value="@InputValue1"
        @oninput="@OnTextAreaInput1">
    </textarea>
</div>

<div class="row">
    <div class="col">
        <label>InputValue1 = @InputValue1</label>
    </div>
</div>

<div class="row">
    <div class="col">
        <br />
        <hr />
        <br />
    </div>
</div>

<div class="col">
    <textarea value="@InputValue2"
        @oninput="@OnTextAreaInput2">
    </textarea>
</div>

<div class="row">
    <div class="col">
        <label>InputValue2 = @InputValue2</label>
    </div>
</div>


@code {

    protected string? InputValue1 { get; set; }

    protected void OnTextAreaInput1(ChangeEventArgs changeEventArgs)
    {
        var newValue = changeEventArgs.Value?.ToString() ?? string.Empty;

        InputValue1 = newValue.Length > 4
            ? "1234"
            : InputValue1 = newValue;
    }

    // *************************************************************

    protected string? InputValue2 { get; set; }

    protected void OnTextAreaInput2(ChangeEventArgs changeEventArgs)
    {
        var newValue = changeEventArgs.Value?.ToString() ?? string.Empty;

        InputValue2 = newValue.Length > 4
            ? "abcd"
            : InputValue2 = newValue;
    }

}

Exceptions (if any)

No unhandled exception

.NET Version

.Net 6 & .Net 7

Anything else?

[roysurles]

Added text file with the actual code...

BlazorTextArea.txt

[javiercn]

@roysurles thanks for contacting us.

This is "by design". We can't tell from an event handler whether you want to enforce value consistency between the state on the control or not.

You can find the detailed explanation here

@bind has special logic to deal with this situation as in that case we "are sure" you want to enforce consistency.

Changing your code as follows will produce the results you expect:

<div class="col">
    <textarea @bind:get="@InputValue2"
              @bind:event="oninput" @bind:set="OnTextAreaInput2">
    </textarea>
</div>

<div class="row">
    <div class="col">
        <label>InputValue2 = @InputValue2</label>
    </div>
</div>

@code
{
    protected string? InputValue2 { get; set; }

    protected void OnTextAreaInput2(string value)
    {
        var newValue = value ?? string.Empty;

        InputValue2 = newValue.Length > 4
            ? "abcd"
            : InputValue2 = newValue;
    }
}

Note that this makes use of the new bind:get,set,after feature, so you need .NET Core 7.0.1.

The explanation is that @bind introduces an additional instruction __builder.SetUpdatesAttributeName("value"); that indicates the renderer it needs to capture the property value and update the value of the attribute accordingly.

[javiercn]

@guardrex do you think we could document something around this behavior in the @bind section of the docs?

I am not talking about the underlying SetUpdatesAttributeName("value"); but about the expected behaviors when you transform the value inside an event handler and how to achieve consistency with @bind:set instead.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.