I have a Blazor component that needs to pass a boolean to its child component to disable the form submit button when submitting.
<EditForm Model="Model" OnValidSubmit="SubmitSearch">
<div class="panel-body">
<ChildComponent IsSubmitting="@IsSubmitting"/>
</div>
</EditForm>
My child component is just a series of inputs with a submit button
<div>
// inputs etc.
<span class="pull-left">
<button class="btn btn-success" type="submit" disabled="@IsSubmitting">
Submit Search
</button>
</span>
</div>
@code {
[Parameter]
public bool IsSubmitting { get; set; }
}
and my submit method sets IsSubmitting like so
public async void SubmitSearch()
{
IsSubmitting = true;
var result = await Service.GetStuff();
// do stuff with result
IsSubmitting = false;
}
I notice that the button never disables. Am I missing some sort of lifecycle hook to trigger a re-render when the parameter updates?
Any help appreciated.
IsSubmitting
gets updated?StateHasChanged()
before the call toawait Service.GetStuff()
? The framework should be doing that for you, but let's rule that out first.disabled="@booleanCondition"
and it works fine. I very much suspect this is a problem with the parent not updating its child component. If I move the button back up to the parent component, the disabling works.SubmitSearch
method