Autocomplete: The selected value is not displayed.

[realLiangshiwei]

Describe the bug

When the selected value has a value, the component will not display the selected value.

A clear and concise description of what the bug is.

To Reproduce

Version: 1.2.0

<Autocomplete TItem="Country"
              TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-SelectedValue="@selectedSearchValue"
              @bind-SelectedText="selectedAutoCompleteText"
              Filter="AutocompleteFilter.StartsWith">
    <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
</Autocomplete>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected search value: @selectedSearchValue
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected text value: @selectedAutoCompleteText
    </FieldBody>
</Field>
@code {
    
    public class Country
    {
        public string Name { get; set; }
        public string Iso { get; set; }
    }
    
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = new List<Country>()
        {
            new Country()
            {
                Iso = "AF",
                Name = "Afghanistan"
            },
            new Country()
            {
                Iso = "AX",
                Name = "Åland Islands"
            }
        };
        await base.OnInitializedAsync();
    }

    public string selectedSearchValue { get; set; } = "AF";
    public string selectedAutoCompleteText { get; set; } = "Afghanistan";
}

Expected behavior

The value should be displayed.

[Aragas]

Good to know that's I'm not the only one experiencing this!
Also occurs on v1.2.1 and v1.2.2

[guillaumebaril]

Same issue.

[David-Moreira]

Hello @realLiangshiwei
The following code works:

<Autocomplete TItem="Country"
              TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-SelectedValue="@selectedSearchValue"
              @bind-SelectedText="@selectedAutoCompleteText"
              Filter="AutocompleteFilter.StartsWith">
    <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
</Autocomplete>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected search value: @selectedSearchValue
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected text value: @selectedAutoCompleteText
    </FieldBody>
</Field>
@code {

    public class Country
    {
        public string Name { get; set; }
        public string Iso { get; set; }
    }

    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = new List<Country>()
        {
            new Country()
            {
                Iso = "AF",
                Name = "Afghanistan"
            },
            new Country()
            {
                Iso = "AX",
                Name = "Åland Islands"
            }
        };
        await base.OnInitializedAsync();
    }

    public string selectedSearchValue { get; set; } = "AF";
    public string selectedAutoCompleteText { get; set; }
}

You do not need to set both properties.
Basically don't set one or the other. In the example I didn't set selectedAutoCompleteText and Autocomplete will sync it up for you.

Basically when having both SelectedValue and SelectedText Autocomplete has to do work to try and figure out how it should sync, i.e value has been changed, it needs to sync text, and vice-versa. By setting only one one of the properties Autocomplete knows how/what to sync.

This should at least get you going.

I will investigate nonetheless, the problem with setting both properties simultaneously if they are the same item.