How to select an option in Fluent UI Blazor, when page loads

Question

I am trying the first example from https://www.fluentui-blazor.net/Autocomplete. It works very well. When page loads, the autocomplete is empty. When you click, it shows list. If you click on any country, it is selected. It works very well.

I have copied the code below for reference.

<FluentAutocomplete TOption="Country"
                    AutoComplete="off"
                    Autofocus="true"
                    Label="Select a country"
                    Placeholder="Select country"
                    OnOptionsSearch="@OnSearchAsync"
                    OptionText="@(x => x.Name)"
                    @bind-SelectedOptions="@SelectedItems"
                    OptionSelected="@(x => x.Name == "Germany")"/>

@code {
  List<Country> allCountries = new List<Country>();
  IEnumerable<Country> SelectedItems = Array.Empty<Country>();

  protected override void OnInitialized()
  {
    InitCountries();
  }
  void InitCountries()
  {
    allCountries.Add(new Country { Name = "Germany" });
    allCountries.Add(new Country { Name = "France" });
    allCountries.Add(new Country { Name = "United Arab Emirates" });
  }
  private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
  {
    e.Items = allCountries.Where(x => x.Name.StartsWith(e.Text));
  }

  class Country
  {
    public string? Name { get; set; } = string.Empty;
  }
}

Problem: I want to select a country e.g. Germany, when page loads.

From the docs, I have used OptionSelected. But it does not work.

OptionSelected="@(x => x.Name == "Germany")"

I am creating an edit form for Person (Name, Phone, Email, Country). For creating a new person, the forms works, because the autocomplete will be empty. But if I open the page in edit mode and want to load existing person, how can I pre-select the country in the FluentAutoComplete?

Answer 1

You could try initialize the SelectedItems at the begining like following sample:

@page "/"

<FluentAutocomplete TOption="Country"
                    AutoComplete="off"
                    Autofocus="true"
                    Label="Select a country"
                    Width="250px"
                    Placeholder="Select countries"
                    OnOptionsSearch="@OnSearchAsync"
                    OptionDisabled="@(e => e.Code == "au")"
                    MaximumSelectedOptions="5"
                    OptionText="@(item => item.Name)"
                    @bind-SelectedOptions="@SelectedItems" />

<p>
    <b>Selected</b>: @(String.Join(" - ", SelectedItems.Select(i => i.Name)))
</p>

@code
{
    static Person editPerson = default!;
    IEnumerable<Country> SelectedItems = Array.Empty<Country>();

    protected override void OnInitialized()
    {
        //Asume we initilize a person to edit
        editPerson = new Person
        {
            UserName="Tom",
            UserCountries=new List<Country>
            {
                new Country{Name="Canada",Code="ca"},
                new Country{Name="America",Code="us"},
            }
        };
        //initialize "SelectedItems"
        SelectedItems = editPerson.UserCountries;
    }
    public class Person
    {
        public string UserName { get; set; }
        public IEnumerable<Country> UserCountries { get; set; }
    }
    public class Country
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
    private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
    {
        var allCountries = new List<Country>()
        {
            new Country{Name="Australia",Code="au"},
            new Country{Name="United States",Code="us"},
            new Country{Name="Canada",Code="ca"},
            new Country{Name="Japan",Code="jp"}
        };
        e.Items = allCountries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                              .OrderBy(i => i.Name);
    }
}

When start project