1. Feedback
  2. Blazor
  3. 6234

Welcome to the Blazor feedback portal. We’re happy you’re here! If you have feedback on how to improve the Blazor, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

AutoComplete drop down disappears when anymore than 1 character has been entered in the auto complete field.

Steps to reproduce:

  1. Run the Blazor App from Visual Studio.
  2. Start typing in the auto complete field. You'll notice quickly that the foldout disappears when you enter 2 or more characters despite those characters being present in 1 or more of the bound data items. 
See code below.

////////////////////
// _Host.cshtml
////////////////////
@addTagHelper *, Syncfusion.EJ2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SyncfusionTest</title>
    <base href="~/" />
    <environment include="Development">
	    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
		<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fabric.css"/>
		<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
		<script src="https://cdn.syncfusion.com/ej2/dist/ej2.introp.min.js"></script>
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              asp-fallback-href="css/bootstrap/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
    </environment>
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>@(await Html.RenderComponentAsync<App>())</app>

	<script src="_framework/blazor.server.js"></script>
<!-- Syncfusion Essential JS 2 ScriptManager -->
</body>
</html>




////////////////////
// _Imports.razor
////////////////////

@layout MainLayout
@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.DropDowns




////////////////////
// Index.razor
////////////////////

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<EjsAutoComplete ID="country" PlaceHolder="e.g. Australia" DataSource="@localdata" Fields="@AutoCompleteFieldSettings"></EjsAutoComplete>

@functions{
	List<object> localdata = new List<object>
	{
		new { Name = "Australia", Code = "AU" },
		new { Name = "Bermuda", Code = "BM" },
		new { Name = "Canada", Code = "CA" },
		new { Name = "Cameroon", Code = "CM" },
		new { Name = "Denmark", Code = "DK" },
		new { Name = "France", Code = "FR" },
		new { Name = "Finland", Code = "FI" },
		new { Name = "Germany", Code = "DE" },
		new { Name = "Greenland", Code = "GL" },
		new { Name = "Hong Kong", Code = "HK" },
		new { Name = "India", Code = "IN" },
		new { Name = "Italy", Code = "IT" },
		new { Name = "Japan", Code = "JP" },
		new { Name = "Mexico", Code = "MX" },
		new { Name = "Norway", Code = "NO" },
		new { Name = "Poland", Code = "PL" },
		new { Name = "Switzerland", Code = "CH" },
		new { Name = "United Kingdom", Code = "GB" },
		new { Name = "United States", Code = "US" },
	};

	public object AutoCompleteFieldSettings = new { value = "Name" };
}