Skip to content

fix: FluentWizardStep breaks data binding when used inside child components #4054

@GlennSmeulders

Description

@GlennSmeulders

🐛 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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions