MudBlazor/MudBlazor

MudTextField cannot reliably submit on Enter key in Blazor MAUI Hybrid apps

Aberta

#9.136 aberto em 7 de jun. de 2024

 (8 comentários) (4 reações) (0 responsável)C# (1.631 forks)batch import
blazor: hybridbughas workaroundhelp wanted

Métricas do repositório

Stars
 (10.394 estrelas)
Métricas de merge de PR
 (Mesclagem média 6d 6h) (108 fundiu PRs em 30d)

Description

I have a .NET 8 Blazor MAUI Hybrid App using MudBlazor.

I use a multiline MudTextField with EditForm for submitting messages.

My goal was to send the message with Enter and get a new line with Shift + Enter.

So I am getting close to it using OnKeyDown and KeyDownPreventDefault properties of MudTextField.

But in my Blazor MAUI app it has a different behaviour than in TryMudBlazor.


<EditForm Model="@model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <MudCard Style="width: 250px" Class="mb-3">
        <MudCardContent>
            <MudTextField
                T="string"
                Immediate="true"
                OnKeyDown="HandleKeyDown"
                KeyDownPreventDefault="_preventDefault"
                TextUpdateSuppression="false"
                @bind-Value="model.Prompt"
                Placeholder="Type a message..."
                Variant="Variant.Filled"
                For="@(() => model.Prompt)"
                AutoGrow
                MaxLines="14"
                TextChanged="TextChangedTest"/>
        </MudCardContent>
        <MudCardActions Class="pt-0">
            <MudSpacer/>
            <MudTooltip Text="Submit">
                <MudIconButton ButtonType="ButtonType.Submit" Icon="@Icons.Material.Filled.Send" Size="Size.Small" Color="Color.Primary"></MudIconButton>
            </MudTooltip>
        </MudCardActions>
    </MudCard>
    @foreach (var message in messages) {
        <div>@message</div>
    }
</EditForm>

@code {
    bool _preventDefault;
    List<string> messages = new();
    PromptForm model = new PromptForm();

    public class PromptForm
    {
        [Required]
        public string Prompt { get; set; }
    }

    protected void HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" && !e.ShiftKey)
        {
            _preventDefault = true;
            Submit();
        }
        else
        {
            _preventDefault = false;
        }
    }

    public void Submit()
    {
        messages.Add($"Prompt: {model.Prompt}");
        model.Prompt = string.Empty;
        StateHasChanged();
    }

    public void TextChangedTest(string text)
    {
        messages.Add($"Text changed: '{text}'");
    }
}

When I type in hi and press Enter these are my results:

Blazor MAUI

Blazor MAUI

TryMudBlazor

TryMudBlazor

As you can see the TryMudBlazor does the desired thing - submitting and clearing out the text field.

.NET BLAZOR MAUI, on the other hand, also seems to try it, at least the field is emptied for a short time, but then it fills up again with the old value.

I'm going crazy here, I just can't figure out what the problem is.

Small addition

Before it was a Blazor server app and there at least the textbox could be cleared if you did NOT specify a rendermode (I had @rendermode=“InteractiveServer”)

That pretty much broke everything else but at least the textbox worked

Maybe this is a clue... or not... I am at the end

Originally posted by @Cr4zyEight in https://github.com/MudBlazor/MudBlazor/discussions/9129

Guia do colaborador