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.