MudForm and MudButton to submit form on Enter key press

[ancientpanda]

Is there a graceful way (or workaround) using a MudForm and MudButton to automatically POST the form if they user presses the Enter key?

Ideally I'd like it to work across all my forms where I can configure the MudButton to be the one to be submitted if they hit Enter.

[ScarletKuro]

I think you can use IKeyInterceptor (injectable MudBlazor service) to listen for the Enter key, once the event fires call the Submit method that is also binded to your button,

[kanachrisi]

Could you please elaborate more on how to use the IKeyInterceptor ?
Thanks

[ScarletKuro]

You need to inject IKeyInterceptorFactory into your component, then you need to call Create to get instance of IKeyInterceptor. Now there is a method Connect where you pass your elementId and list of keys to listen for. There is event KeyDown on which you subscribe.
On event KeyDown you make your logic like submitting the form or whatever you need. You also need to dispose the IKeyInterceptor and unsubscribe from the event once you are done.
You can look at MudBlazor source code to see how it's used.

[lieszkol]

Great pointers by ScarletKuro. This worked for me:

@implements IDisposable
@using MudBlazor.Services
@inject IKeyInterceptorFactory KeyInterceptorFactory
...
<MudForm Model="@entity" @ref="@form">...</MudForm>
...
@code {
private string _elementId = "dialogcontainer_" + Guid.NewGuid().ToString().Substring(0, 8);
private IKeyInterceptor? _keyInterceptor;
protected bool IsJSRuntimeAvailable { get; set; }
MudForm? form;

protected override void OnAfterRender(bool firstRender)
	{
		IsJSRuntimeAvailable = true;
		base.OnAfterRender(firstRender);
	}

protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			_keyInterceptor = KeyInterceptorFactory.Create();
			await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
				{
				TargetClass = "mud-form",
					Keys = {
						new KeyOptions { Key="Enter", SubscribeDown = true },
					},
				});
			_keyInterceptor.KeyDown += HandleKeyDown;
		}
		await base.OnAfterRenderAsync(firstRender);
	}
internal void HandleKeyDown(KeyboardEventArgs args)
    {
        switch (args.Key)
        {
			case "Enter":
				_ = Submit();
                break;
        }
    }

private async Task Submit()
	{
		if (form != null)
		{
			await form.Validate();
			if (form.IsValid)
			{
				SaveEntity();
			}
		}
	}

void IDisposable.Dispose()
	{
		if (_keyInterceptor is not null)
		{
			_keyInterceptor.KeyDown -= HandleKeyDown;
		}

		if (IsJSRuntimeAvailable)
		{
			_keyInterceptor?.Dispose();
		}
	}

[sveins12]

I am glad there is a way, but it looks quite complex and maybe expensive. Are there any plans or ideas on simplifying it by using more of the browsers built-in functionality for submitting forms?