1. Home
  2. Forum
  3. Blazor
  4. Autofill="true"

Autofill="true"

When using

<p>ComboBox Text is:<strong>@text</strong></p>

    <SfComboBox @ref="comboboxObj" TValue="int" TItem="Countries" ShowClearButton="false" Placeholder="e.g. Australia" @bind-Value="@ComboVal"  DataSource="@Country">
        <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
        <ComboBoxEvents TValue="int" TItem="Countries" ValueChange="onChange"></ComboBoxEvents>
    </SfComboBox>

@code {
    SfComboBox<int, Countries> comboboxObj;

    public int ComboVal = 1;

    public string text;

    public class Countries
    {
        public string Name { get; set; }

        public int Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
    new Countries() { Name = "Australia", Code = 1 },
    new Countries() { Name = "Bermuda", Code = 2 },
    new Countries() { Name = "Canada", Code = 3 },
    new Countries() { Name = "Cameroon", Code= 4 },
    };
    public void onChange(ChangeEventArgs<int, Countries> e)
    {
        text = this.comboboxObj.Text;
    }
}

Every thing works fine.


Add Autofill="true" and start typing in combobox and it thows


2020-10-19T20:34:06.546Z] Error: System.InvalidCastException: Unable to cast object of type 'System.String' to type 'System.Int32'.
   at Syncfusion.Blazor.DropDowns.SfComboBox`2.SetAutoFill(TItem activeItem)
   at Syncfusion.Blazor.DropDowns.SfComboBox`2.InlineSearch(KeyboardEventArgs args)
   at Syncfusion.Blazor.DropDowns.SfComboBox`2.IncrementSearch(KeyboardEventArgs args)
   at Syncfusion.Blazor.DropDowns.SfComboBox`2.SearchList(KeyboardEventArgs args)
   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.OnFilterUp(KeyboardEventArgs args)
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
e.log @ blazor.server.js:19
blazor.server.js:1 [2020-10-19T20:34:06.548Z] Information: Connection disconnected.
2blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
    at e.send (blazor.server.js:1)
    at e.sendMessage (blazor.server.js:1)
    at e.sendWithProtocol (blazor.server.js:1)
    at e.send (blazor.server.js:1)
    at blazor.server.js:8
    at Object.t.dispatchEvent (blazor.server.js:8)
    at blazor.server.js:8
    at e.onEvent (blazor.server.js:8)
    at e.onGlobalEvent (blazor.server.js:8)

2 Replies 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team October 20, 2020 06:44 AM UTC

Hi Dave, 
 
 
Greetings from Syncfusion support.  
 
 
We checked the reported console error. The cause of the issue is that you have provided the TValue as int. In C #, the default value of int is 0. Then it will check for the corresponding value of the '0' in the data source. If the value is present, the corresponding value is chosen, otherwise the exception is thrown, as AllowCustom is true in the ComboBox component by default. Therefore, we recommend that you use any of the solutions below to resolve the issue in the end. 
 
  • Set AllowCustom as false to the ComboBox component.
  • Provide the TValue with nullable (meaning that int?) type.
 
 
Please find the code example for the second solution. 
 
 
<p>ComboBox Text is:<strong>@text</strong></p> 
 
<SfComboBox @ref="comboboxObj" TValue="int?" TItem="Countries" ShowClearButton="false" Placeholder="e.g. Australia" @bind-Value="@ComboVal" DataSource="@Country"> 
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings> 
    <ComboBoxEvents TValue="int?" TItem="Countries" ValueChange="onChange"></ComboBoxEvents> 
</SfComboBox> 
 
@code { 
    SfComboBox<int?, Countries> comboboxObj; 
 
    public int? ComboVal = 1; 
 
    public string text; 
 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public int? Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
    new Countries() { Name = "Australia", Code = 1 }, 
    new Countries() { Name = "Bermuda", Code = 2 }, 
    new Countries() { Name = "Canada", Code = 3 }, 
    new Countries() { Name = "Cameroon", Code= 4 }, 
    }; 
    public void onChange(ChangeEventArgs<int?, Countries> e) 
    { 
        text = this.comboboxObj.Text; 
    } 
} 
 





You can find the breaking changes in the combobox component from the below link. 




Please check the above sample and get back to us if you need any other further assistance. 


Regards, 
Sevvandhi N 



PO Prince Oliver Syncfusion Team October 21, 2020 01:33 PM UTC

Hi Dave, 

We have consider this as a defect in our end, the fix for the issue will be included in the upcoming patch release scheduled on October 28, 2020. You can track the status of the issue in the following feedback link 


Regards, 
Prince 


Marked as answer
Loader.
Up arrow icon