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

MudBlazor - Multiline MudTextField not submitting form

$
0
0

In MudBlazor I have a MudTextField with AutoGrow and MaxLines enabled.

enter image description here

The default behaviour of the multiline MudTextField is to add a new line when pressing "Enter"...

My goal is to get a new line when pressing Shift + Enter and to submit when pressing Enter only.

I already tried using KeyDownPreventDefault according to this post (Prevent new line on hit Enter Key on MudField (MudBlazor) in blazor application) but without much success

My code in TryMudBlazor here

<EditForm Model="@model" OnValidSubmit="OnValidSubmit"><MudCard Style="width: 100%" Class="mb-3"><MudCardContent><MudTextField                T="string"                Immediate="true"                OnKeyDown="HandleKeyDown"                KeyDownPreventDefault="_preventDefault"                @bind-Value="model.Prompt"                Placeholder="Type a message..."                Variant="Variant.Filled"                For="@(() => model.Prompt)"                AutoGrow                MaxLines="14"/></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 {    public string Prompt { get; set; } = string.Empty;    bool _preventDefault;    List<string> messages = new();    PromptForm model = new PromptForm();    public class PromptForm    {        [Required]        public string Prompt { get; set; }    }    protected void HandleKeyDown(KeyboardEventArgs e)    {        _preventDefault = e.Key == "Enter" && !e.ShiftKey;    }    public void OnValidSubmit(EditContext context) {        model.Prompt = string.Empty;        messages.Add("Submit Successful");        StateHasChanged();    }}

Problem

When clicking the "Send" button manually OnValidSubmit is getting called and the success message Submit Successful is getting printed.

Pressing Shift + Enter adds a new line as desired

BUT

When pressing Enter only nothing happens althogh the same success message should appear


Viewing all articles
Browse latest Browse all 4839

Trending Articles



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