-
Notifications
You must be signed in to change notification settings - Fork 439
Description
🐛 Bug Report
When FluentWizardStep is used as a wrapper inside a child component, data binding stops working correctly. UI updates from model changes (e.g., from dropdown selections) are not reflected. However, when FluentWizardStep wraps the component from the parent, data binding works as expected.
To Reproduce
Broken scenario (FluentWizardStep inside child component):
Parent.razor
<FluentWizard>
<Steps>
<MyStepComponent />
</Steps>
</FluentWizard>
MyStepComponent.razor
<FluentWizardStep Label="My Step">
<MyDropdown @bind-SelectedItemId="model.ItemId"
OnChange="HandleDropdownChange"/>
<FluentTextField @bind-Value="model.Name" />
<FluentNumberField @bind-Value="model.Days" />
</FluentWizardStep>
@code {
private MyModel model = new();
private async Task HandleDropdownChange(Item item)
{
model.Name = item.Name;
model.Days = item.Days;
// UI does NOT update!
}
}
Working scenario (FluentWizardStep in parent):
Parent.razor
<FluentWizard>
<Steps>
<FluentWizardStep Label="My Step">
<MyStepComponent />
</FluentWizardStep>
</Steps>
</FluentWizard>
MyStepComponent.razor
<MyDropdown @bind-SelectedItemId="model.ItemId"
OnChange="HandleDropdownChange"/>
<FluentTextField @bind-Value="model.Name" />
<FluentNumberField @bind-Value="model.Days" />
@code {
private MyModel model = new();
private async Task HandleDropdownChange(Item item)
{
model.Name = item.Name;
model.Days = item.Days;
// UI updates correctly!
}
}
🤔 Expected Behavior
Data binding should work consistently regardless of whether FluentWizardStep is used inside a child component or wraps it from the parent.
😯 Current Behavior
When FluentWizardStep is used as a wrapper inside a child component, data binding stops working correctly. UI updates from model changes (e.g., from dropdown selections) are not reflected. However, when FluentWizardStep wraps the component from the parent, data binding works as expected.
🔦 Context
- This appears to be a rendering context issue where FluentWizardStep interferes with Blazor's change detection when used inside child components
- StateHasChanged() does not fix the issue
- The model is updated correctly in memory, but the UI doesn't reflect changes
- This forces developers to structure their components in a specific way, reducing component reusability
🌍 Your Environment
- FluentUI Blazor version: 4.11.8
- .NET Version: 8.0
- Browser: All browsers