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

FluentUI Blazor TextField doesn't update current-value correctly

$
0
0

I'm using the FluentUI Blazor FluentTextField component to implement a text field which enforces a max length on the input. When the user inputs a text, that is longer than the max length, the value of the text box should be trimmed to the max length.My implementation works well for the first time the user inputs a too-long text. But when the user then inputs a too-long text again, the current-value of the FluentTextField which is displayed in the text field isn't updated.

Here is an example code to reproduce the behaviour:

<h5>Field with max length @_maxLength</h5><FluentTextField Value="@_textValue" ValueChanged="@TextValueChanged"></FluentTextField><p>You entered: @_textValue</p>@code {    int _maxLength = 4;    string? _textValue = null;    public void TextValueChanged(string? newValue)    {        if(newValue is not null && newValue.Length > 4)        {            _textValue = newValue.Substring(0, 4);        }        else        {            _textValue = newValue;        }    }}

If you type "abcdef" and enter, _textValue is set to "abcd" and the text field displayes the value "abcd" as expected. If you now type "gh" and enter again, the _textValue is still set to "abcd", but the current-value, that is displayed in the text field is "abcdgh".

Any ideas how I can force the FluentTextField to update the current-value? I've tried using StateHasChanged() and InvokeAsync(StateHasChanged) but that didn't work for me.


Viewing all articles
Browse latest Browse all 4297

Latest Images

Trending Articles



Latest Images

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