1. Home
  2. Forum
  3. Blazor
  4. Autocomplete bug after last update

Autocomplete bug after last update

Hi I recently updated from 18.4.49 to 19.1.55 and aftter this some of my code that up until now worked, stopped working.

For an example look at this code:


@page "/Test"
<SfComboBox TValue="Car" TItem="Car" PopupHeight="230px" Width="200px" AllowCustom="false" Autofill="true" Placeholder="Car" @bind-Value="@SelectedCar" DataSource="@Cars">
    <ComboBoxFieldSettings Text="Name" Value="Id"></ComboBoxFieldSettings>
</SfComboBox>

<SfButton Content="Test" @onclick="@Onlick"></SfButton>

@code {

    public List<Car> Cars { get; set; }
    public Car SelectedCar { get; set; }


    protected override async Task OnInitializedAsync()
    {
        Cars = new List<Car>
        {
            new Car
            {
                Id = 1,
                Model = "Audi",
                Make = "A4"
            },
            new Car
            {
                Id = 2,
                Model = "VW",
                Make = "Beetle"
            },
            new Car
            {
                Id = 3,
                Model = "Ford",
                Make = "Focus"
            },

        };
    }
    
    private async Task Onlick(MouseEventArgs arg)
    {
        if (SelectedCar == null)
            throw new Exception("No Car selected");

    }


    public class Car
    {
        public int Id { get; set; }
        public string Make { get; set; }
        public string Model { get; set; }
        public double MaxSpeed { get; set; }
        public string Name => Model + " - " + Make;

    }




}


When I click the dropdown arrow in the frontend and click on an item, it works. if i type the first letter of any entry it returns an error:


      Unhandled exception rendering component: Unable to cast object of type 'System.Int32' to type 'Car'.
      System.InvalidCastException: Unable to cast object of type 'System.Int32' to type 'Car'.
         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)

I think this is most likely because it tries to autocomplete the text and cant do this.

5 Replies 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team April 12, 2021 08:57 AM UTC

Hi Simon, 

  
Greetings from Syncfusion support. 

We checked the reported issue “Console error throwing when we type a value in the ComboBox component” in both the versions 18.4.49 and 19.1.55. We would like to let you that, the reported issue occurs in the version 18.4.49 also. Can you please confirm whether the exception occurs in the version 18.4.49? If not, please share the details on the case that you ensured with elaborate steps.  

Also upon inspecting the given code, you have mismatched the type for TValue and property bound to Value field, which is the cause of the reported exception. In the code, you have used the Car class for the TValue and the int type for the field’s value property. As a result, the reported exception has occurred. We suggest a workaround that you provide the TValue as int type and bind-Value attribute as int type to resolve the reported issue. 

Meanwhile we will consider this case “Console error thrown if the bind-Value attribute's type is mismatched with the TValue type” as a bug at our end. The fix for the reported issue will be included in the tomorrow’s patch release. Please track the status of this issue from the below feedback link. 




Please refer to the modified code below and get back to us if you require any further assistance. 

@using Syncfusion.Blazor.DropDowns 
 
<SfComboBox TValue="int" TItem="Car" PopupHeight="230px" Width="200px" AllowCustom="false" Autofill="true" Placeholder="Car" @bind-Value="@SelectedCar" DataSource="@Cars"> 
    <ComboBoxFieldSettings Text="Name" Value="Id"></ComboBoxFieldSettings> 
</SfComboBox> 
 
<SfButton Content="Test" @onclick="@Onlick"></SfButton> 
 
@code { 
 
    public List<Car> Cars { get; set; } 
    public int SelectedCar { get; set; } 
 
 
    protected override async Task OnInitializedAsync() 
    { 
        Cars = new List<Car> 
    { 
            new Car 
            { 
                Id = 1, 
                Model = "Audi", 
                Make = "A4" 
            }, 
            new Car 
            { 
                Id = 2, 
                Model = "VW", 
                Make = "Beetle" 
            }, 
            new Car 
            { 
                Id = 3, 
                Model = "Ford", 
                Make = "Focus" 
            }, 
 
        }; 
    } 
 
    private async Task Onlick(MouseEventArgs arg) 
    { 
        if (SelectedCar == null) 
            throw new Exception("No Car selected"); 
 
    } 
 
 
    public class Car 
    { 
        public int Id { get; set; } 
        public string Make { get; set; } 
        public string Model { get; set; } 
        public double MaxSpeed { get; set; } 
        public string Name => Model + " - " + Make; 
 
    } 
 
} 
 



Regards, 
Sevvandhi N 


SB Simon Balling April 12, 2021 09:15 AM UTC

Hi

Why is it that when i select an item manually the SelectedCar is filled correctly?

I checked in my old code and also found this error.
Is there no way to return the object instead of an id?

Regards
Simon

SN Sevvandhi Nagulan Syncfusion Team April 13, 2021 07:28 AM UTC

Hi Simon, 


Thank you for sharing the information as requested. 


We checked your query of “Binding object to value property”. We resolved the reported issue “Console error throwing when we type a value in the ComboBox component” in the version “19.1.56”. So now you can bind the object type to value property. Kindly refer the following example code. 


<SfComboBox TValue="Car" TItem="Car" PopupHeight="230px" Width="200px" AllowCustom="false" Autofill="true" Placeholder="Car" @bind-Value="@SelectedCar" DataSource="@Cars"> 
    <ComboBoxFieldSettings Text="Name" Value="Id"></ComboBoxFieldSettings> 
</SfComboBox> 
 
<SfButton Content="Test" @onclick="@Onlick"></SfButton> 
 
@code { 
 
    public List<Car> Cars { get; set; } 
    public Car SelectedCar { get; set; } 
 
 
    protected override async Task OnInitializedAsync() 
    { 
        Cars = new List<Car> 
{ 
            new Car 
            { 
                Id = 1, 
                Model = "Audi", 
                Make = "A4" 
            }, 
            new Car 
            { 
                Id = 2, 
                Model = "VW", 
                Make = "Beetle" 
            }, 
            new Car 
            { 
                Id = 3, 
                Model = "Ford", 
                Make = "Focus" 
            }, 
 
        }; 
    } 
 
    private async Task Onlick(MouseEventArgs arg) 
    { 
        if (SelectedCar == null) 
            throw new Exception("No Car selected"); 
 
    } 
 
 
    public class Car 
    { 
        public int Id { get; set; } 
        public string Make { get; set; } 
        public string Model { get; set; } 
        public double MaxSpeed { get; set; } 
        public string Name => Model + " - " + Make; 
 
    } 
 
} } 
 

Screenshot: 

 


Kindly check the above code and get back to us if you need further assistance. 


Regards, 
Sevvandhi N 


Marked as answer
SB Simon Balling April 14, 2021 09:39 PM UTC

Hi Sevvandhi,

it works now exactly as I want it. Thanks :)

SN Sevvandhi Nagulan Syncfusion Team April 15, 2021 04:40 AM UTC

Hi Simon, 



We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 



Regards, 
Sevvandhi N 


Loader.
Up arrow icon