CodeBeam.MudBlazor.Extensions
CodeBeam.MudBlazor.Extensions copied to clipboard
MudLoadingButton does not submit a form
Paste the following into the playground
Clicking the MudLoadingButton does not trigger the Submit method to increment the counter, but clicking the MudButton does increment the counter.
As both buttons have ButtonType="ButtonType.Submit" I expected they would behave in the same way.
<MudText Typo="Typo.h6">Counter is @Counter</MudText>
<EditForm Enhance FormName="Form1" Model="fooModel" OnSubmit="Submit">
<MudTextField Label="Text" @bind-Value="fooModel.Text" For="@(() => fooModel.Text)" />
<MudLoadingButton ButtonType="ButtonType.Submit" @bind-Loading="saving" Size="Size.Small" Variant="Variant.Filled" LoadingAdornment="Adornment.Start" Color="Color.Primary" Class="mt-1">
<LoadingContent>
Saving
</LoadingContent>
<ChildContent>
Save
</ChildContent>
</MudLoadingButton>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary">@ButtonText</MudButton>
</EditForm>
@code {
public int Counter;
public bool saving;
public class Foo
{
public string Text { get; set; } = "????";
}
public Foo fooModel = new Foo();
public string ButtonText { get; set; } = "Click Me";
protected override void OnInitialized()
{
Counter = 0;
}
async Task Submit()
{
saving = true;
await Task.Delay(1000);
++Counter;
saving = false;
StateHasChanged();
}
}
Similar issue here, have to double click it sometimes.
Was about to open an issue and found this, thanks for opening it.
I believe this is because MudLoadingButton extends from MudBaseButton instead of MudButton. I'll do some tests later to confirm.
Could you try with AutoDelay="0" parameter?
@mckaragoz With AutoDelay="0" seems to work correctly now.
AutoDelay="0" works for me, but this had me stumped for way too long until I found this. Can someone help explain why this is even a factor? Interestingly when it was rendered Server-side the button worked fine, but when I changed it to InteractiveAuto it stopped working without this attribute.