FluentSelect go into infinite SelectedOptionChanged calls

[elendil-software]

Hi,

I have a component containing a form and it use a child componenant containing a FluentSelect. The option to be selected is passed by parameter to the component.
My problem is that it keeps calling SelectedOptionChanged as soon as the parameter is set by the parent. And the parameter passed to OnSelectedOptionChanged is always null

The parent component :

@using Alpaca.IPX800.Features.Configuration.Devices.Shared
@rendermode InteractiveServer


    <EditForm EditContext="_editContext" FormName="AddIPX800Device" OnValidSubmit="SubmitForm">
        <FluentValidationValidator/>

        <FormSection Title="Test" HelpText="Help text">
            <DeviceNameTextField DeviceName="@_safetyMonitorConfigurationModel.Name" ValueChanged="OnDeviceNameChanged"/>
            <IPX800Select SelectedIPX800="@_selectedIPX800" SelectedIPX800Changed="OnSelectedIPX800DeviceChanged"/>
        </FormSection>
        <ButtonsBar>
            <FluentButton Appearance="Appearance.Accent" Type="ButtonType.Submit">Submit</FluentButton>
        </ButtonsBar>
    </EditForm>

@code {
    
    [Parameter, EditorRequired] public Func<SafetyMonitorConfigurationModel, Task> OnSubmit { get; set; } = null!;
    [Parameter] public SafetyMonitorConfigurationModel? SafetyMonitorConfigurationModel { get; set; }
    
    private SafetyMonitorConfigurationModel _safetyMonitorConfigurationModel = new();
    private IPX800Select.IPX800SelectModel? _selectedIPX800;
    private EditContext _editContext = null!; 
    
    protected override void OnParametersSet()
    {
        _editContext = new EditContext(_safetyMonitorConfigurationModel);

        if (SafetyMonitorConfigurationModel != null)
        {
            _safetyMonitorConfigurationModel = SafetyMonitorConfigurationModel;
            _selectedIPX800 = new IPX800Select.IPX800SelectModel(_safetyMonitorConfigurationModel.IPX800DeviceId, _safetyMonitorConfigurationModel.Name);
        }
    }
    
    private void OnSelectedIPX800DeviceChanged(IPX800Select.IPX800SelectModel? ipx800Device)
    {
        _safetyMonitorConfigurationModel.IPX800DeviceId = ipx800Device?.Id ?? 0;
    }

    //...
}

the child component (IPX800Select)

@inherits AlpacaIPX800ComponentBase
@using Alpaca.IPX800.Core.Features.IPX800.GetIPX800List
@rendermode InteractiveServer

<FormGroup>
        <FluentSelect TOption="IPX800SelectModel"
                      Label="IPX800 Device"
                      Items="@_ipx800Devices"
                      Id="_driverConfigurationModel._ipx800Id"
                      OptionValue="@(p => p.Id.ToString())"
                      OptionText="@(p => p.Name)"
                      Placeholder="Select IPX800"
                      SelectedOption="@SelectedIPX800"
                      SelectedOptionChanged="OnSelectedOptionChanged"/>
    </FormGroup>

@code {
    [Parameter, EditorRequired] public IPX800SelectModel? SelectedIPX800 { get; set; }
    [Parameter, EditorRequired] public EventCallback<IPX800SelectModel> SelectedIPX800Changed { get; set; }
    
    private IEnumerable<IPX800SelectModel> _ipx800Devices = new List<IPX800SelectModel>();

    private void OnSelectedOptionChanged(IPX800SelectModel? selectedIPX800)
    {
       SelectedIPX800Changed.InvokeAsync(selectedIPX800);
    }

    protected override async Task OnInitializedAsync()
    {
        await RemoteExecuteAndHandleError(new GetIPX800ListGrpcCommand(), response =>
             {
                 _ipx800Devices = response.Select(ipx800Device => new IPX800SelectModel(ipx800Device.Id, ipx800Device.Name));
             });
    }

    public record IPX800SelectModel(int Id, string Name);
}

What am I doing wrong ?

[vnbaaij]

We'd need something we can actually run if you want us to look at it. Otherwise it will just continue to be a guessing game.