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.

[elendil-software]

@vnbaaij
Here is the full project : alpaca-ipx800.zip
When you run it, on the menu on left there is a "add" link and an "edit" link. Both use the same comonent and it's the "edit" doesn't work as expected.

[elendil-software]

@vnbaaij
Any guess on what I'm doing wrong ?
Or could this be a bug ?
As I'm quite new to Blazor development, I bet on the first one :-D

[MarvinKlein1508]

@elendil-software I took a look on your project and I think this has something todo with the structure itself. You are passing the same item from component to component. And I think when the parameter will be set in component 3 it tells component to to set the new parameter. When the paramater in component 2 changes it will trigger component 3 again.

Usually you would either cascade all parameters down using CascadingParameter attribute or you would just move the select into your form component.

[elendil-software]

Thanks for your help. I will try with a CascadingParameter to see if it works better.
I put the select in a component because I will have to reuse it in other forms. It would not be too much work to have it in the form, but I know I will have other more complex components in the future where I probably have the same issue. Si I prefer to try with CascadingParameter first

[elendil-software]

Hi,

I reworked my test project :

• Removed the intermediate form component and put the form directly in the page component. The same page is used for add and edit
• Pass only the id to the component IPX800Select instead of instanciating the object
• Remove the callback parameter has been removed, the OnSelectedOptionChanged method only log a line.

Even with these modifications it keep looping on OnSelectedOptionChanged

I also tried a CascadingParameter as sugested by @MarvinKlein1508 but I get the same result.

As an additionnal step I also tried to put the FluentSelect in the EditForm without put it in a component but it didn't help.

I also noticed a huge memory consumption (~10 MB/sec) as soon as I try to change the selected item

alpaca-ipx800-v2.zip