asp.net-coreblazorblazor-webassemblymudblazormudtextfield

MudTextField not updating then changing the text in code


I have this MudDialog component showing a MudTextField. MudTextField updates it's text value when typing inside the text field, but it doesnt update it when modifying the value through code. would anybody happen to know why?

I have shortened the content and removed some styles and methods that I deem not relevant to this issue (such as sending or saving the email). if any more code sharing is required, I'm happy to share it.

the line in question is InputValue = string.Empty; // Clear the input field while the method is being called, the MudTextField doesnt react at all to the value of InputValue being changed. StateHasChanged() or InvokeAsync(StateHasChanged) dont help either. I can confirm the chip is being added successfully. What do I need to do for MudTextField to update it's value once I change it in code?

thanks!

<MudDialog>
    <TitleContent></TitleContent>
    <DialogContent>    
        <MudGrid>
            <MudItem xs="9">
                <div class="email-input-container">
                    <MudChipSet T="string" ReadOnly="false" Class="chip-set">
                       u/foreach (var chip in _chips)
                        {
                        <MudChip T="string" Text="@chip" OnClose="() => RemoveChip(chip)" CloseIcon="@Icons.Material.Filled.Close" Ripple="false">
                        </MudChip>
                        }
                    </MudChipSet>
                    <MudTextField Immediate="true" u/bind-Value="InputValue" Placeholder="Enter email address and press space..." OnKeyUp="OnKeyUpHandler" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email"/>
                </div>
            </MudItem>
        </MudGrid>

      
        <MudTextField u/bind-Value="SubjectTextValue" Label="Subject" Variant="Variant.Filled"/>
        <br/>
        <MudHtmlEditor u/bind-Html="BodyText"  />
        <!-- <MudTextField T="string" Variant="Variant.Outlined" Text="@BodyText" Lines="10"/> -->
        <br/>

    </DialogContent>
    <DialogActions>
        <MudButton StartIcon="@Icons.Material.Filled.Send" Color="Color.Primary" OnClick="SendEmail">Send</MudButton>
        <MudButton StartIcon="@Icons.Material.Filled.Save" IconColor="Color.Secondary" OnClick="SaveMailAsDraft">Save Draft</MudButton>
        <MudButton StartIcon="@Icons.Material.Filled.Delete" bColor="Color.Primary" OnClick="CloseDialog">Cancel</MudButton>
    </DialogActions>
</MudDialog>


u/code {

    private string InputValue { get; set; } = "";
    private List<string> _chips = new List<string>();

    private void OnKeyUpHandler(KeyboardEventArgs args)
    {
        // MyLogger.Information("Key pressed is:" + args.Key); 
        if (args.Key == " " && !string.IsNullOrWhiteSpace(InputValue))
        {
            var email = InputValue.Trim();
            if (!string.IsNullOrWhiteSpace(email) && !_chips.Contains(email))
            {
                _chips.Add(email);
            }
            InputValue = string.Empty; // Clear the input field
        }
    }

    private void RemoveChip(string chip)
    {
        _chips.Remove(chip);
    }
}

Solution

  • as mentioned by Uerschel, adding TextUpdateSuppression="false" as a parameter on MudTextField did the trick.

    Thank you!!!