FluentSelect binding issue

[thellebuyck]

I"m using the FluentSelect component and having some issues with binding. Using the example here , I'm unable to see the value of a selected Item. It's causing me validation issues because the value is not bound either to the Selected-Option or @bind-Value property.

I substituted my own list of of objects instead of the sample data. I didn't seem to find any issues with binding for FluentSelect in the issues tab. Is there a known issue that I'm not aware of?

My code snipped below:

@inject IAddressService addressService
@attribute [Authorize]



<PageTitle>Home</PageTitle>

<FluentSelect TOption="StateCodeDto"
              Autofocus="true"
              Label="Select a State"
              Items="@SelectedItems"
              Id="stateCode"
              Width="250px"
              Height="250px"
              Placeholder="Select State"
              OptionValue="@(s =>s.Id.ToString())"
              OptionText="@(item => item.Name)"
              @bind-Value="selectedState"
              @bind-SelectedOption="SelectedStateCode"  />



<p>Selected StateId:@selectedState</p>

@code {
    IEnumerable<StateCodeDto> SelectedItems = Array.Empty<StateCodeDto>();
    StateCodeDto? SelectedStateCode;
    private CompanyDto? company;
    int selectedStateId = 0;
    string? selectedState = "none";


    protected override async Task OnInitializedAsync()
    {
        SelectedItems = await addressService.GetAllStateCodesAsync();


        company = await api.GetAsync(Guid.NewGuid());
        await base.OnInitializedAsync();
    }```

[vnbaaij]

This seems to be a scenario that should work.
To investigate, it would be helpful if you can provide a sample we can run. From the code you posted we are missing AddressService and StateCodeDto etc.

[thellebuyck]

my apologies.... you should be able to run this snippet below:

<PageTitle>Home</PageTitle>

<FluentSelect TOption="StateCodeDto"
              Autofocus="true"
              Label="Select a State"
              Items="@SelectedItems"
              Id="stateCode"
              Width="250px"
              Height="250px"
              Placeholder="Select State"
              OptionValue="@(s =>s.Id.ToString())"
              OptionText="@(item => item.Name)"
              @bind-Value="selectedState"
              @bind-SelectedOption="SelectedStateCode" />

              <p>Selected State Code: @SelectedStateCode?.Name</p>

@code {
    IEnumerable<StateCodeDto> SelectedItems = Array.Empty<StateCodeDto>();
    StateCodeDto? SelectedStateCode;
    private CompanyDto? company;
    int selectedStateId = 0;
    string? selectedState = "none";

    protected override async Task OnInitializedAsync()
    {
        SelectedItems = GetStateCodes();


        company = await api.GetAsync(Guid.NewGuid());
        await base.OnInitializedAsync();
    }


    private List<StateCodeDto> GetStateCodes()
    {
        var states = GetStates();

        List<StateCodeDto> results = new List<StateCodeDto>();
        var id = 1;
        foreach (var state in states)
        {
            results.Add(new StateCodeDto { Id = id, Name = state.Value, Abbreviation = state.Key });
        }

        return results;

    }
    private Dictionary<string, string> GetStates()
    {
        Dictionary<string, string> states = new Dictionary<string, string>();

        states.Add("AL", "Alabama");
        states.Add("AK", "Alaska");
        states.Add("AZ", "Arizona");
        states.Add("AR", "Arkansas");
        states.Add("CA", "California");
        states.Add("CO", "Colorado");
        states.Add("CT", "Connecticut");
        states.Add("DE", "Delaware");
        states.Add("DC", "District of Columbia");
        states.Add("FL", "Florida");
        states.Add("GA", "Georgia");
        states.Add("HI", "Hawaii");
        states.Add("ID", "Idaho");
        states.Add("IL", "Illinois");
        states.Add("IN", "Indiana");
        states.Add("IA", "Iowa");
        states.Add("KS", "Kansas");
        states.Add("KY", "Kentucky");
        states.Add("LA", "Louisiana");
        states.Add("ME", "Maine");
        states.Add("MD", "Maryland");
        states.Add("MA", "Massachusetts");
        states.Add("MI", "Michigan");
        states.Add("MN", "Minnesota");
        states.Add("MS", "Mississippi");
        states.Add("MO", "Missouri");
        states.Add("MT", "Montana");
        states.Add("NE", "Nebraska");
        states.Add("NV", "Nevada");
        states.Add("NH", "New Hampshire");
        states.Add("NJ", "New Jersey");
        states.Add("NM", "New Mexico");
        states.Add("NY", "New York");
        states.Add("NC", "North Carolina");
        states.Add("ND", "North Dakota");
        states.Add("OH", "Ohio");
        states.Add("OK", "Oklahoma");
        states.Add("OR", "Oregon");
        states.Add("PA", "Pennsylvania");
        states.Add("RI", "Rhode Island");
        states.Add("SC", "South Carolina");
        states.Add("SD", "South Dakota");
        states.Add("TN", "Tennessee");
        states.Add("TX", "Texas");
        states.Add("UT", "Utah");
        states.Add("VT", "Vermont");
        states.Add("VA", "Virginia");
        states.Add("WA", "Washington");
        states.Add("WV", "West Virginia");
        states.Add("WI", "Wisconsin");
        states.Add("WY", "Wyoming");

        return states;
    }




}

@code{
    public class StateCodeDto
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Abbreviation { get; set; } = string.Empty;
    }
}

[vnbaaij]

After removing the CompanyDto related lines, I could run this.

The issue is caused by the code in GetStateCodes method. You initialize id to 1 and never change this anymore. All options then get value=1 so our code has no clue which value belongs to which state. If I change the line in the foreach to:

results.Add(new StateCodeDto { Id = id++, Name = state.Value, Abbreviation = state.Key });

selecting a value and displaying it works.

[thellebuyck]

Good catch. I also uncovered one other issue in that if my rendermode wasn't explicitly set to InteractiveServer the variable doesn't get set. I will mark this as answered and closed. I appreciate your help.