How to close Dialog using enter and escape?

[pmeems]

I have a very simple webpage using Blazor (v8) and FluentUI (v4.10.2).
It has an Add button and a data grid.
The first column of each row of the data grid has an Edit button.

I want to use the same dialog for the Add and Edit action.
The dialog has 1 textbox and a close and cancel button.
When the user presses the Escape key the cancel button should be triggered and the dialog closed.
When the user presses the Enter key the value of the textbox should be returned to the caller and the dialog should be closed.

With Googling and reading the FluentUI documentation the dialog will close when hit Escape. Also in Edit mode, hitting Enter works but in Add mode I need to press the Enter key twice.
Also my code feels a bit hacky, so I wonder if I'm doing it right or not.

Here's the code to open the dialog:

       // Entry is the row data:
        var data = new SimpleDialogData { Id = entry.Id, Value = entry.Name };

        // Show dialog with form data to edit:
        var dialog = await DialogService.ShowDialogAsync<SimpleDialog>(data, new DialogParameters
        {
            Height = "240px", Title = $"Edit", 
            PreventDismissOnOverlayClick = true, PreventScroll = true,
        }).ConfigureAwait(false);

        var result = await dialog.Result.ConfigureAwait(false);
        if (result is { Cancelled: false, Data: not null })
        {
            data = (SimpleDialogData)result.Data;
            // Update the row data
         }

I use similar as the Edit option for the Add option, except the SimpleDialogData is empty.

This is the code for the SimpleDialog:

@implements IDialogContentComponent<SimpleDialogData>

@* Header *@
<FluentDialogHeader ShowDismiss="true">
    <FluentStack VerticalAlignment="VerticalAlignment.Center">
        <FluentIcon Value="@(new Icons.Regular.Size24.WindowApps())"/>
        <FluentLabel Typo="Typography.PaneHeader">
            @Dialog.Instance.Parameters.Title
        </FluentLabel>
    </FluentStack>
</FluentDialogHeader>

@* Footer *@
<FluentDialogFooter>
    <FluentButton Appearance="Appearance.Accent" Disabled="@(!_editContext.Validate())" OnClick="@SaveAsync" Type="ButtonType.Submit">Save</FluentButton>
    <FluentButton Appearance="Appearance.Neutral" OnClick="@CancelAsync">Cancel</FluentButton>
</FluentDialogFooter>

@* Body *@
<FluentDialogBody>
    <EditForm EditContext="@_editContext" FormName="simple_dialog" OnValidSubmit="@SaveAsync" novalidate>
        <DataAnnotationsValidator/>

        <FluentTextField Size="30" Autofocus="true"
                         @bind-Value="@Content.Value"
                         @onkeydown="@HandleKeyDown"
                         @oninput="@HandleInputChange"
                         Required/>
        <FluentValidationSummary/>
    </EditForm>

</FluentDialogBody>

@code {
    [Parameter] public SimpleDialogData Content { get; set; } = default!;

    [CascadingParameter] public FluentDialog Dialog { get; set; } = default!;

    private EditContext _editContext = default!;
    
    protected override void OnInitialized()
    {
        _editContext = new EditContext(Content);
    }    

    private async Task SaveAsync()
    {
        // Manually update the EditContext and trigger the binding to ensure the value is updated
        _editContext.NotifyFieldChanged(FieldIdentifier.Create(() => Content.Value));

        // Now trigger the form submission
        if (!string.IsNullOrWhiteSpace(Content.Value))
        {
            await Dialog.CloseAsync(Content);
        }        
    }
    
    private async Task HandleKeyDown(KeyboardEventArgs e)
    {
        switch (e.Key)
        {
            case "Enter":
                _editContext.NotifyFieldChanged(FieldIdentifier.Create(() => Content.Value)); // Force field update
                await SaveAsync();
                break;
            case "Escape":
                await CancelAsync();
                break;
        }
    }
    
    // This ensures the input value is updated in real-time
    private void HandleInputChange(ChangeEventArgs e)
    {
        _editContext.NotifyFieldChanged(FieldIdentifier.Create(() => Content.Value));
    }    

    private async Task CancelAsync()
    {
        await Dialog.CancelAsync();
    }
}

Especially the _editContext.NotifyFieldChanged(FieldIdentifier.Create(() => Content.Value)); feels a bit hacky and I need to use it 3 times. I use it because else in Edit mode the changed value wasn't returned to the caller because it wasn't updated yet.

Please advice.

[vnbaaij]

There is an issue with submission icw TextField. Search the issues for more information.

[pmeems]

The issues Vincent is referring to are #1050, #1085 and #2726
In short: it is a known issue and needs to be fixed upstream.

[pmeems]

I've accidentally found a workaround.
When I update the HandleInputChange method to:

    private void HandleInputChange(ChangeEventArgs e)
    {
        // Update value for immediate validation:
        Content.Value = e.Value?.ToString() ?? string.Empty;
    }

I don't only get validation during typing, but when now hitting the Enter-key once the value is submitted and the dialog is closed.