Perhaps I'm doing something wrong but I can't seem to get the DropDownList to "select" an option when using the filter. The filter works but when clicking on one of the filtered options it doesn't actually select anything. The drop-down works fine when not actually typing anything in to the filter.
<h3>Selected Country: @SelectedCountry</h3>
<SfDropDownList ID="BrandSelect"
TValue="string"
TItem="Countries"
DataSource="Country"
@bind-Value="SelectedCountry"
AllowFiltering="true"
FilterBarPlaceholder="Filter countries">
<DropDownListFieldSettings Text="Name" Value="Code" />
</SfDropDownList>
@code {
private string SelectedCountry = "US";
private List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
}