We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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

221213-105307659.gif

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.
221213-105339304-1.png

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");
}
}


3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team December 14, 2022 03:32 PM UTC

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



NR Niels Rymenams December 15, 2022 11:42 AM UTC

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


UD UdhayaKumar Duraisamy Syncfusion Team December 19, 2022 06:51 AM UTC

On our end, the reported issuepreselect 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


Loader.
Live Chat Icon For mobile
Up arrow icon