Setting the value programmatically shows the value in the textbox instead of the text or raises an exception

[Niels Rymenams]

I've created two samples building upon the sample that is provided in the Syncfusion documentation.

The scenario:

• Step 1: After initial load of the page, you click on the "Set Belgium" button which sets the @bind-value to the Country object containing "Belgium". The correct binding happens: the auto-complete text field shows "Belgium".
• Step 2: Start typing in the auto-complete text field (e.g. "Ca") and select a suggested value. The correct binding happens: the auto-complete text field shows "Canada" and the @bind-value holds the correct object.
• Step 3: Click again on the "Set Belgium" button. Depending on the sample the following occurs:
• TValue="string": No error happens, but the binding is incorrect. The @bind-value holds the correct value, but the auto-complete text field shows "BE" instead of "Belgium".
  
• TValue="Country": An exception is thrown and the sample application crashes. See screenshot below for the exception.

Sample #1:

@page "/sfautocompletestring"

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using SfPlayground.Models

SfAutoComplete

                DataSource="_countries"
                TItem="Country"
                TValue="string">
                                   Value="@nameof(Country.Code)"/>




    @onclick="OnClick">
    Set Belgium



    Value: @($"{_value}")


@code
{
    private string? _value;
    private readonly List _countries = new()
    {
        new() { Name = "Australia", Code = "AU" },
        new() { Name = "Belgium", Code = "BE" },
        new() { Name = "Bermuda", Code = "BM" },
        new() { Name = "Canada", Code = "CA" },
        new() { Name = "Cameroon", Code = "CM" },
        new() { Name = "Denmark", Code = "DK" }
    };

    private void OnClick(MouseEventArgs args)
    {
        _value = "BE";
    }
}

Sample #2:

@page "/sfautocomplete"

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using SfPlayground.Models

SfAutoComplete

                DataSource="_countries"
                TItem="Country"
                TValue="Country">
                                   Value="@nameof(Country.Code)"/>




    @onclick="OnClick">
    Set Belgium



    Value: @($"{_value?.Code}")


@code
{
    private Country? _value;
    private readonly List _countries = new()
    {
        new() { Name = "Australia", Code = "AU" },
        new() { Name = "Belgium", Code = "BE" },
        new() { Name = "Bermuda", Code = "BM" },
        new() { Name = "Canada", Code = "CA" },
        new() { Name = "Cameroon", Code = "CM" },
        new() { Name = "Denmark", Code = "DK" }
    };

    private void OnClick(MouseEventArgs args)
    {
        _value = _countries.Find(x => x.Code == "BE");
    }
}

[UdhayaKumar Duraisamy]

We have created a sample based on the shared information and validated the query. Unfortunately, we were unable to replicate the reported issue in your scenario. We also provided a sample for reference. In addition, as mentioned below, we request that you provide additional information about the problem. This will allow us to further investigate the problem and provide you with a prompt solution.

1. Issue reproducing runnable sample (or modify the shared sample as per your scenario).

2. Issue replication steps.

<div class="control">

    <p>AutoComplete1 value is: @AutoVal</p><hr />

    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">

        <AutoCompleteFieldSettings Text="Name" Value="Code"></AutoCompleteFieldSettings>

    </SfAutoComplete>

    <hr />

 

    @if(AutoVal1 != null)

    {

        <p>AutoComplete2 value is: @AutoVal1.Code</p>

    }

    <hr />

    <SfAutoComplete TValue="Country" TItem="Country" Placeholder="e.g. Australia" @bind-Value="AutoVal1" DataSource="@Countries">

        <AutoCompleteFieldSettings Text="Name" Value="Code"></AutoCompleteFieldSettings>

    </SfAutoComplete>

   

    <hr>

    <SfButton OnClick="updatevalue" Content="Update"></SfButton>

</div>

@code {

    public string AutoVal { get; set; }

    public Country? AutoVal1 { get; set; } = new Country() { };

 

    public class Country

    {

        public string Name { get; set; }

 

        public string Code { get; set; }

    }

 

    void updatevalue()

    {

        AutoVal = "BM";  //  TValue="string"

        AutoVal1 = new Country() { Name = "Bermuda", Code = "BM" };  // TValue="Country"

    }

}

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_Blazor1609010545

[Niels Rymenams]

Hi,

For some reason the formatting of the code block broke the actual code snippet.

Please find a sample application attached. The reproductions steps are described in the original post and displayed in the screen capture.

Kind regards,
Niels

Attachment: SfAutoCompleteSample_6970d0e1.zip

[UdhayaKumar Duraisamy]

On our end, the reported issue “preselect value does not update to the component when the TValue and TItem provided as ValueTuple type” has already been resolved in the 20.2.39 version. To resolve the current issue, please upgrade your NuGet to the most recent version.

Release Notes : https://blazor.syncfusion.com/documentation/release-notes/20.2.39?type=all#dropdownlist

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfAutoCompleteSample1606933507