When I hit Cancel, flow goes into my Cancel method, but then after that goes into my Save action? Huh? Why? (Just FYI: This is a child component of a Parent component)

<h3>EditPage</h3>
@inject AppState _appState
@inject IJSRuntime _jsRuntime

<div >

    <EditForm Model="@_model" OnValidSubmit="@Save">
        <div >
            <div >
                <button type="submit" >Save</button>
                <button @onclick="CancelEdit" >Cancel</button>
                <button @onclick="()=>Delete(new MyClass())" >Delete</button>
            </div>
        </div>
    </EditForm>
</div>

@code {
    [Parameter] public EventCallback<string> OnClick { get; set; }

    MyClass? _model;

    async Task Delete(MyClass item)
    {
        if (!await _jsRuntime.InvokeAsync<bool>("confirm", $"Are you sure you want to delete item?"))
            return;

        //do delete
        _appState.IsEdit = false;
        _appState.EditingId = "";
    }

    protected override void OnInitialized()
    {
        _model = new();
    }

    void CancelEdit()
    {
        _appState.IsEdit = false;
        _appState.EditingId = "";

        OnClick.InvokeAsync("Cancel action occurred");
    }

    void Save()
    {
        //persist work Add or Update

        _appState.IsEdit = false;
        _appState.EditingId = "";

        OnClick.InvokeAsync("Save occurred");
    }
}

CodePudding user response：

This is because a button in a form submits by default and your form's submit action is Save.

<button type='button'> should stop that.