Autocomplete not displaying correct values
I am using version 18.1.48.
In the sample code added at the bottom, I am adding 2950 pseudo-random rows, which is close to the sample data size have in my application.
I have added logging to show the different events that are happening.
PROBLEM 1: Not displaying the correct values
When I type the value BRJ, it should display 2 results, which is correct. Unfortunately, it shows the wrong values.
Upon closing the dropdown box, and opening it again, it shows the correct values.
---
PROBLEM 2: Error after leaving control
Steps to reproduce:
1. Focus
2. Fill in BRJ and select the 1st result (which shows incorrect value)
3. Leave control by clicking somewhere on the page --> Placeholder shows
4. Click the Arrow-Down --> Nothing happens
5. Leave control --> Error is thrown:
-----
@page "/AutoComplete"
@using System
@using System.Text
@using Syncfusion.Blazor.DropDowns
<div class="container">
<dl class="row">
<dt class="col-6 control-label">Select</dt>
<dd class="col-6">
<SfAutoComplete TValue="string"
TItem="City"
FilterType="@Syncfusion.Blazor.DropDowns.FilterType.Contains"
Highlight="true"
IgnoreAccent="true"
IgnoreCase="true"
@bind-Value="@StringValue"
Placeholder="Fill in city..."
ShowPopupButton="true"
DataSource="@Data">
<AutoCompleteFieldSettings Value="@nameof(City.Name)"
GroupBy="@nameof(City.Country)" />
@* Added all events for checking debugging *@
<AutoCompleteEvents TValue="string"
ValueChange="@((Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) => AddLog($"ValueChanged({args.Value})"))"
Opened="@((Syncfusion.Blazor.DropDowns.PopupEventArgs args) => AddLog($"Opened()"))"
Blur="@((object args) => AddLog($"Blur()"))"
Focus="@((object args) => AddLog($"Focus()"))"
CustomValueSpecifier="@((CustomValueSpecifierEventArgs args) => AddLog($"CustomValueSpecifier({args.Item.ToString()}, {args.Text})"))"
OnValueSelect="@((Syncfusion.Blazor.DropDowns.SelectEventArgs args) => AddLog($"OnValueSelect({args.Item.ToString()})"))"
OnOpen="@((Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs args) => AddLog($"OnOpen()"))"
OnClose="@((PopupEventArgs args) => AddLog($"OnClose()"))"
/>
</SfAutoComplete>
</dd>
</dl>
<div class="row" style="background-color: cornsilk;">
@((MarkupString)log)
</div>
</div>
@code {
/* Variable to display the log of the events */
private string log = "";
/* I am using this control because the Dropdown is giving too poor of a performance to be used */
/* I need the Id of the record, so I am fetching the If based on the List. */
private int id = 0;
[Parameter]
public int Id
{
get => id;
set
{
if (id == value)
return;
id = value;
AddLog($"Id = {id}");
}
}
/* The List that holds the items to use for filtering */
protected List<City> Data { get; set; }
/* Updates the Id */
protected string StringValue
{
get
{
if (Data != null && Data.Count > 0 && Data.Any(x => x.Id == Id))
return Data.First(x => x.Id == Id).Name;
return null;
}
set
{
if (Data != null && Data.Count > 0 && Data.Any(x => x.Name == value))
Id = Data.First(x => x.Name == value).Id;
else if (Id != 0)
Id = 0;
}
}
protected override void OnInitialized()
{
base.OnInitialized();
/* Add 2950 random cities, spread over 5 counties */
/* Because of the negative index, this will always return the same random sequence */
var rnd = new Random(-1);
Data = new List<City>();
for (var i = 0; i < 2950; i++)
Data.Add(new City() { Country = $"Country-{rnd.Next(1, 5)}", Id = i, Name = RandomString(10, rnd) });
}
/* Class holding the data for the data to select from, with a grouping on Country */
public class City
{
public int Id { get; set; }
public string Name { get; set; }
public string Country { get; set; }
public override string ToString() {
return $"Id: {Id}, Name: {Name}, Country: {Country}";
}
}
/* Gets a random string of <size> length. Passing the Random class for it to be pseudo-random values */
public string RandomString(int size, Random rnd)
{
var sb = new StringBuilder();
for (int i = 0; i < size; i++)
sb.Append(Convert.ToChar(Convert.ToInt32(Math.Floor(26 * rnd.NextDouble() + 65))));
return sb.ToString();
}
/* Adds the <message> to the log shown on screen */
private void AddLog(string message)
{
log = ($"{DateTime.Now.ToString("o")} {message}.<br />") + log;
}
}
SIGN IN To post a reply.
1 Reply
SIGN IN To post a reply.
