MudTextField cannot reliably submit on Enter key in Blazor MAUI Hybrid apps
#9.136 aberto em 7 de jun. de 2024
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
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

