Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

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

$
0
0

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?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>