FluentAutocomplete: how to know when user selects from the list

[mgrivera]

Hi all,
I'm trying to implemente the Autocomplete in one of my pages. Everything is going fine:

1. When the user opens the page, I can show the previously selected item, by using: Items and bind-SelectedOptions properties.
2. When the user tries to search, I use the eventcallback: OnOptionsSearch to produce the list. Note: this works pretty well!

What I'm missing is a way to update my model when the user selects from the list. I tried to use the SelectedOptionsChanged callback but there is an error: The component parameter 'SelectedOptionsChanged' is used two or more times for this component.

This is the Autocomplete configuration I'm using:

<FluentAutocomplete TOption="Asegurados"
                    AutoComplete="off"
                    Autofocus="false"
                    Label="Asegurado"
                    Placeholder="Search"
                    SelectValueOnTab="true"
                    OnOptionsSearch="@OnSearchAseguradosAsync"
                    Items="_aseguradosList"
                    OptionText="@(item => item.Nombre)"
                    OptionValue="@(item => item.Id)"
                    Multiple="true"
                    MaximumSelectedOptions="1"
                    Style="width:100%;"
                    Id="AseguradoFluentAuto"
                    SelectedOptionsChanged="OnSelectionChanged"
                    @bind-SelectedOptions="@_aseguradosSeleccionados" />

If I remove the SelectedOptionsChanged parameter everything runs fine. But I need to know when the user selects from the list to update the model. In fact, the only thing I still need is: how to update the model when the user selects an option from the list.

Thanks in advance for your help and bye ...

[vnbaaij]

SelectedOptionsChanged is provided automatically by using @bind-SelectedOptions. You indeed can't have both. That is a normal Blazor thing, not library specific.

If you want to do something after the value has been changed, you can use a @bind-SelectedOptions:after method

[mgrivera]

Yes! :after gives you the way to know when user selects from the list.
Thanks.

[mgrivera]

Hi! and many thanks for your answer.
I'm doing something wrong; just don't know how to fix it.

<FluentAutocomplete TOption="Asegurados"
                    AutoComplete="off" Autofocus="false"  Label="Asegurado"  Placeholder="Search (min 3 chars)"
                    SelectValueOnTab="true"
                    OnOptionsSearch="@OnAseguradosSearchAsync"
                    Items="_aseguradosList"
                    OptionText="@(item => item.Nombre)" OptionValue="@(item => item.Id)"
                    Multiple="true" MaximumSelectedOptions="1"
                    Style="width:100%;"
                    Id="AseguradoFluentAuto"
                    @bind-SelectedOptions="_aseguradosSeleccionados"
                    @bind-SelectedOptions:after="@OnAseguradosSelectionadosChangedAsync" (1) />  // message error below 

... ... ...

IEnumerable<Asegurados>? _aseguradosSeleccionados;

private async Task OnAseguradosSelectionadosChangedAsync(IEnumerable<Asegurados>? selectedItems)
{
    int i = 0;      // just to put something here
}

(1): receiving this error when adding this parameter: Argument 1: cannot convert from 'method group' to 'System.Action'

Again many thanks in advance ...

[dvoituron]

Your method OnAseguradosSelectionadosChangedAsync cannot have arguments.

private async Task OnAseguradosSelectionadosChangedAsync()
{
    // Your can use _aseguradosSeleccionados to detect which items are selected
}

[mgrivera]

It works pretty well! Thanks for your help ...