EjsAutoComplete Bug When TValue="int?" and MinLength>=2

[Robert]

Version: 17.4.0.55

The below will cause a large exception message to be output to the console when a user types the first character if it is not an int (exception partially copied below, along with a screenshot). The app appears to continue to function okay.

Please note, the MinLength needs to be 2 or greater and the TValue needs to be an int.

This only happens if the model value property (CountryId below) is not populated on load. If populated on load, the user may delete the existing auto complete entry and type without an exception.

<EjsAutoComplete @bind-Value="@ViewModel.CountryId" TValue="int?" Placeholder="Choose a country" FloatLabelType="@FloatLabelType.Always" Query="@QueryCountries" MinLength="2">

<EjsDataManager AdaptorInstance="@typeof(DataAdaptorForCountriesBasic)" Adaptor="Adaptors.CustomAdaptor">EjsDataManager>

<AutoCompleteFieldSettings Value="CountryId" Text="CountryName">AutoCompleteFieldSettings>

EjsAutoComplete>

Error Message:

System.FormatException: Input string was not in a correct format.

   at System.Number.ThrowOverflowOrFormatException(ParsingStatus status, TypeCode type)

   at System.Number.ParseInt32(ReadOnlySpan`1 value, NumberStyles styles, NumberFormatInfo info)

   at System.String.System.IConvertible.ToInt32(IFormatProvider provider)

   at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)

   at Syncfusion.EJ2.Blazor.BaseComponent.ChangeType(Object value, Type conversionType, Boolean isClientChange)

   at Syncfusion.EJ2.Blazor.BaseComponent.UpdateComponentModel(Dictionary`2 properties, BaseComponent parentObject, Boolean isAutoInitialized)

   at Syncfusion.EJ2.Blazor.BaseComponent.UpdateModel(Dictionary`2 properties)

Error: System.FormatException: Input string was not in a correct format.

   at System.Number.ThrowOverflowOrFormatException(ParsingStatus status, TypeCode type)

   at System.Number.ParseInt32(ReadOnlySpan`1 value, NumberStyles styles, NumberFormatInfo info)

   at System.String.System.IConvertible.ToInt32(IFormatProvider provider)

   at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)

   at Syncfusion.EJ2.Blazor.BaseComponent.ChangeType(Object value, Type conversionType, Boolean isClientChange)

   at Syncfusion.EJ2.Blazor.BaseComponent.UpdateComponentModel(Dictionary`2 properties, BaseComponent parentObject, Boolean isAutoInitialized)

   at Syncfusion.EJ2.Blazor.BaseComponent.UpdateModel(Dictionary`2 properties)

    at Object.endInvokeDotNetFromJS (https://localhost:5001/_framework/blazor.server.js:8:31660)

    at e. (https://localhost:5001/_framework/blazor.server.js:8:103446)

    at https://localhost:5001/_framework/blazor.server.js:1:19202

    at Array.forEach ()

    at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:19173)

    at e.processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:17165)

    at e.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:10276)

    at WebSocket.i.onmessage (https://localhost:5001/_framework/blazor.server.js:1:38091)

[Berly Christopher]

Hi Robert, 

  

Greetings from Syncfusion support.  

  

While checking the reported issue, you have bind the data source and TValue as integer but searching the value by entering the alphabetic characters. Due to this, reported console error is thrown. 

  

Also, based on the provided code example you have mapped Text and Value field to the AutoComplete component. But AutoComplete component have the support for mapping Value Field only. Also, please ensure to provide proper data based on the provided TValue property.  

  

Demo Link: https://blazor.syncfusion.com/demos/AutoComplete/DataBinding  

UG Link: https://ej2.syncfusion.com/blazor/documentation/autocomplete/data-source/?no-cache=1#custom-adaptor  

  

Else, if you want to use the Text and Value field, we suggest you to use our Synfusion Blazor ComboBox component by enabling the filtering option as AllowFiltering is true. Please refer the below documentation, samples to know more about this component.  

  

API Link: https://help.syncfusion.com/cr/blazor/  

Demo Link: https://blazor.syncfusion.com/demos/ComboBox/Filtering?theme=bootstrap4  

UG Link: https://ej2.syncfusion.com/blazor/documentation/combobox/filtering/  

  

Regards, 

Berly B.C 

[Robert]

Okay, thank you for your help.

The ability to define TValue as an int and then have Text on the Autocomplete would be essential for me to be able to use it. Hopefully, this is something that will be added.

[Berly Christopher]

Hi Robert,  

  

Sorry for the inconvenience caused.   

  

As already stated, we don’t have text and value field support in AutoComplete component. So, we suggest you to use the ComboBox component with filtering for both text and value property as ComboBox component functionalities similar to the AutoComplete component.   

  

Regards,  

Berly B.C  

[Robert]

In relation to the Synfusion Blazor ComboBox with AllowFiltering set to true.

Does this control fetch the value if the model property has a value when initialized, using the id.

So, in the example above, if CountryId were set to 5, should it query with the 'where' operator set to "equal" as does the Auto Complete.

I cannot get this behaviour with this control.

[Berly Christopher]

Hi Robert, 

  

We can set the value for the ComboBox component by assigning the value for the ID by mapping the value field to display the corresponding text of the provided ID.  

  

[index.razor] 

  

<EjsComboBox @ref="ComboObj" TValue="int?" PopupHeight="230px" DataSource="@Country" Autofill="true" Value="@Value" Placeholder="Select a FirstName" AllowFiltering="true"> 

    <ComboBoxFieldSettings Text="FirstName" Value="EmployeeID"></ComboBoxFieldSettings> 

    <ComboBoxEvents TValue="int?" Filtering="OnFiltering"></ComboBoxEvents> 

</EjsComboBox> 

<script> 

@code { 

    EjsComboBox<int?> ComboObj; 

    public int? Value { get; set; } = 3; 

    public string RemoteQuery { get; set; } 

    public void OnFiltering(FilteringEventArgs e) 

    { 

        e.PreventDefaultAction = true; 

        RemoteQuery = "new ej.data.Query().where('FirstName', 'contains', '" + e.Text + "', true)"; 

        ComboObj.Filter(this.Country, RemoteQuery); 

    } 

    public class Countries 

    { 

        public string FirstName { get; set; } 

        public int EmployeeID { get; set; } 

    } 

 

    private List<Countries> Country = new List<Countries> 

        { 

        new Countries() { FirstName = "Australia", EmployeeID = 1 }, 

        new Countries() { FirstName = "Bermuda", EmployeeID = 2 }, 

        new Countries() { FirstName = "Canada", EmployeeID = 3 }, 

        new Countries() { FirstName = "Cameroon", EmployeeID = 4 }, 

        new Countries() { FirstName = "Denmark", EmployeeID = 5 }, 

        new Countries() { FirstName = "France", EmployeeID = 6 }, 

        new Countries() { FirstName = "Finland", EmployeeID = 7 }, 

        new Countries() { FirstName = "Germany", EmployeeID = 8 }, 

        new Countries() { FirstName = "Greenland", EmployeeID = 8 }, 

        new Countries() { FirstName = "Hong Kong", EmployeeID = 9 }, 

        new Countries() { FirstName = "India", EmployeeID = 10 }, 

        new Countries() { FirstName = "Italy", EmployeeID = 11 }, 

        new Countries() { FirstName = "Japan", EmployeeID = 12 }, 

        new Countries() { FirstName = "Mexico", EmployeeID = 13 }, 

        new Countries() { FirstName = "Norway", EmployeeID = 14 }, 

        new Countries() { FirstName = "Poland", EmployeeID = 15 }, 

        new Countries() { FirstName = "Switzerland", EmployeeID = 16 } 

    }; 

 

} 

  

We have prepared the sample with filtering option and attached it below.   

Sample Link: https://www.syncfusion.com/downloads/support/forum/152417/ze/Blazor_DropDowns_152417_combobox_(2)-1755915088  

  

UG Link: https://ej2.syncfusion.com/blazor/documentation/combobox/filtering/   

  

If we misunderstood your query, please provide more details to check the requirement at our end.   

  

Regards,  

Berly B.C