@bind-Selected Option:after doesn't work in my component

[DomenicoFormoso]

I have a code that works great for selecting the year

<FluentToolbar style="width:100%">
    <FluentInputLabel ForId="cb1" Orientation="Orientation.Horizontal" Autocomplete="ComboboxAutocomplete.Inline">Anno</FluentInputLabel>
    <FluentCombobox Id="cb1" @bind-Value="@annoS" TOption="string" Width="120px" @onchange="OnAnnoCambiato">
            <FluentOption>2025</FluentOption>
            <FluentOption>2024</FluentOption>
            <FluentOption>2023</FluentOption>
            <FluentOption>2022</FluentOption>
            <FluentOption>2021</FluentOption>
            <FluentOption>2020</FluentOption>
        </FluentCombobox>

Now I decided to create a reusable component and call it like this

<FluentToolbar style="width:100%">
    <Components.Comuni.ComboAnno Etichetta="Anno" Selezionato="@annoS" Width="120px" AnnoCambiato="@OnAnnoCambiato"></Components.Comuni.ComboAnno>
	

The component code is

<FluentInputLabel Orientation="Orientation.Horizontal">@Etichetta</FluentInputLabel>
<FluentCombobox TOption="string"
                Height="200px"
                Width="@Width"
                @bind-SelectedOption=@elementoSelezionato
                @bind-SelectedOption:after=@OnAnnoCambiato>

    <FluentOption>2025</FluentOption>
    <FluentOption>2024</FluentOption>
    <FluentOption>2023</FluentOption>
    <FluentOption>2022</FluentOption>
    <FluentOption>2021</FluentOption>
    <FluentOption>2020</FluentOption>
</FluentCombobox>

    
@code {

    [Parameter] public string? Selezionato { get; set; }
    [Parameter] public string? Etichetta { get; set; }
    [Parameter] public string? Width { get; set; }
    [Parameter] public EventCallback<string> AnnoCambiato { get; set; }

    private string? elementoSelezionato;


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            elementoSelezionato = Selezionato;
            StateHasChanged();
        }
        await base.OnAfterRenderAsync(firstRender);
    }

   
    private async Task OnAnnoCambiato()
    {
       // always null
        if (elementoSelezionato != null)
        {
            await AnnoCambiato.InvokeAsync(elementoSelezionato);
        }
    }

}	

when I change the value of the combo elementoSelezionato it is always null

[DomenicoFormoso]

Hello everyone, with these changes the component seems to work well

@onchange="@(async (e) => await OnAnnoCambiato(e.Value?.ToString()))">

instead of this one

@bind-SelectedOption:after=@OnAnnoCambiato

and therefore this

private async Task OnAnnoCambiato(string? newValue)
{
    if (!string.IsNullOrEmpty(newValue))
    {
        elementoSelezionato = newValue;
        await AnnoCambiato.InvokeAsync(elementoSelezionato);
    }
}

replaces

 private async Task OnAnnoCambiato()
    {
       // always null
        if (elementoSelezionato != null)
        {
            await AnnoCambiato.InvokeAsync(elementoSelezionato);
        }
    }

Clearly I didn't understand why

[shark0151]

Indeed, the change events do not seem to be triggered the way they should

In this setup, the setter does not get triggered
<FluentCombobox Items="Results" OptionValue="@(i => i.Title)" @bind-Value="@Query" .... private string? _query; public string? Query { get { return _query; } set { _query = value; InvokeAsync(async () => await Search(value)); } }

The same is true for @bind-Value:after

The solution above works with @onchange and @oninput but the immediate delay is ignored

[vnbaaij]

Your code does not work because it is using manual FluentOptions (that dont' have a Value set!!). We can only partially create the needed relation between the component and the options if you specify them manually.

Replace the code with below, and you will see the @bind-SelectedOption:after gets called with the selected value:
(this is based on the code from https://www.fluentui-blazor.net/Combobox#from-list-of-option%3Cstring%3E-items)

<FluentInputLabel Orientation="Orientation.Horizontal">@Etichetta</FluentInputLabel>
    <FluentCombobox Items=@stringOptions
                OptionText="@(i => i.Text)"
                OptionValue="@(i => i.Value)"
                OptionSelected="@(i => i.Selected)"
                Height="200px"
                Width="@Width"
                @bind-SelectedOption=@elementoSelezionato
                @bind-SelectedOption:after=@OnAnnoCambiato>
</FluentCombobox>

@code {

    [Parameter] public string? Selezionato { get; set; }
    [Parameter] public string? Etichetta { get; set; }
    [Parameter] public string? Width { get; set; }
    [Parameter] public EventCallback<string> AnnoCambiato { get; set; }

    private Option<string> elementoSelezionato = default!;

    List<Option<string>> stringOptions = new()
        {
            { new Option<string> { Value = "2025", Text = "2025" } },
            { new Option<string> { Value = "2024", Text = "2024" } },
            { new Option<string> { Value = "2023", Text = "2023", Selected = true } },
            { new Option<string> { Value = "2022", Text = "2022" } },
            { new Option<string> { Value = "2021", Text = "2021" } },
            { new Option<string> { Value = "2020", Text = "2020" } }
   };

    private async Task OnAnnoCambiato()
    {
       // always null
        if (elementoSelezionato != null)
        {
            await AnnoCambiato.InvokeAsync(elementoSelezionato.Value);
        }
    }

}

[shark0151]

Meaning that bind-Value cannot (or should not) be used? Then, is there an example of how to inject my own search function or to dynamically change the items list? I am really trying to avoid requesting the entire database and then filter through results. As in I'm trying to run a function before actually selecting an option

[vnbaaij]

@bind-Value should work the same way (have not tried it with above code. But what is wrong with getting the value from the Option<T>?

[shark0151]

I wasn't able to get @bind-Value:after working; I will try again tomorrow, following your suggestion.
I am trying to dynamically update the item list based on the Value, not from selectedOption. Some sort of prefiltering, I guess?

[DomenicoFormoso]

Thank you, In my case it works very well like this:

<FluentInputLabel Orientation="Orientation.Horizontal">@Etichetta</FluentInputLabel>
<FluentCombobox Items=@stringOptions
                OptionText="@(i => i.Text)"
                OptionValue="@(i => i.Value)"
                OptionSelected="@(i => i.Selected)"
                Height="200px"
                Width="@Width"
                @bind-SelectedOption=@elementoSelezionato
                @bind-SelectedOption:after=@OnAnnoCambiato>
</FluentCombobox>

@code {

    [Parameter] public string? Selezionato { get; set; }
    [Parameter] public string? Etichetta { get; set; }
    [Parameter] public string? Width { get; set; }
    [Parameter] public EventCallback<string> AnnoCambiato { get; set; }

    private Option<string> elementoSelezionato = default!;

    List<Option<string>> stringOptions = new()
    {
            { new Option<string> { Value = "2025", Text = "2025" } },
            { new Option<string> { Value = "2024", Text = "2024" } },
            { new Option<string> { Value = "2023", Text = "2023" } },
            { new Option<string> { Value = "2022", Text = "2022" } },
            { new Option<string> { Value = "2021", Text = "2021" } },
            { new Option<string> { Value = "2020", Text = "2020" } }
    };

    private async Task OnAnnoCambiato()
    {
        if (elementoSelezionato != null)
        {
            await AnnoCambiato.InvokeAsync(elementoSelezionato.Value);
        }
    }
}

but I have to set the initial value from the Selected parameter passed by the call

protected override void OnInitialized()
 {
     elementoSelezionato = stringOptions.FirstOrDefault(x => x.Value == Selezionato) ?? stringOptions.First();
 }

thanks again

[DomenicoFormoso]

With the new version 4.11.4 my component doesn't work well, OptionText is not shown.

[vnbaaij]

Please create a new issue then (with relevant and runnable reproduction code)

[DomenicoFormoso]

ok