ValueChange event fires twice when @bind-value is set

I have a dropdown list where I set the pre-selected value with @bind-value, which is a parameter.

I also have a callback that is invoked in the dropdown list value changed event.


The problem is whenever I change values on the dropdown (and log it to the console), the selected value is logged, then changed to the default pre-selected value, which is also logged. What is happening?





My blazor version is 19.4.0.56


1 Reply

SP Sureshkumar P Syncfusion Team May 8, 2023 11:55 AM UTC

Isaac, we suggest you use the ValueChanged and valueExpression on the component native instead of the component valuechange event to achieve your requirement.

Find the code example here:

[parentComponent.razor]

 

<SfDropDownList @ref="DdlObj" Value="@Value" ValueChanged="ValueChanged" ValueExpression="@ValueExpression" TValue="TVal" TItem="TItemss" ShowClearButton="true" Placeholder="e.g. Australia" DataSource="@Country">

    <DropDownListFieldSettings Value="@FieldValue" Text="@FieldText"></DropDownListFieldSettings>

</SfDropDownList>

 

 

@code

{

    SfDropDownList<TVal, TItemss> DdlObj;

    [Parameter]

    public List<TItemss> Country { get; set; }

    private TVal _value { get; set; }

    [Parameter]

    public string ID { get; set; }

    [Parameter]

    public string FieldText { get; set; }

    [Parameter]

    public string FieldValue { get; set; }

    [Parameter]

    public string Text

    {

        get;set;

    }

    [Parameter]

    public Expression<Func<TVal>> ValueExpression { get; set; }

    [Parameter]

    public TVal Value

    {

        get => _value;

        set

        {

            if (!EqualityComparer<TVal>.Default.Equals(value, _value))

            {

                _value = value;

                var propertyType = typeof(TVal);

                TItemss getObject = Country.Where(item => Equals(item.GetType().GetProperty(FieldValue).GetValue(item), value)).FirstOrDefault();

                this.Text = (string)getObject.GetType().GetProperty(FieldText).GetValue(getObject);

                ValueChanged.InvokeAsync(value);

            }

        }

    }

    [Parameter]

    public EventCallback<TVal> ValueChanged { get; set; }

 

 

    public MyClass MyObject = null!;   

 

}

 

[chaildComponent.razor]

 

<CustomTextbox TVal="string" FieldText="Descrizione" FieldValue="Codice" TItemss="ListClass" Text="@MyObject.MySelectedDescrizione" Country="@MyObject.MyDataSource" @bind-Value="@MyObject.MySelectedCodice"></CustomTextbox>

 

@code {

    public MyClass MyObject = null!;

 

    protected override Task OnInitializedAsync()

    {

        MyObject = new MyClass

            {

                MyDataSource = new List<ListClass>

            {

                new ListClass { Codice = "C001", Descrizione = "Text 01"},

                new ListClass { Codice = "C002", Descrizione = "Text 02"},

                new ListClass { Codice = "C003", Descrizione = "Text 03"},

            }

            };

        MyObject.MySelectedCodice = "C002";

        return base.OnInitializedAsync();

    }

}


Regards,

Sureshkumar P


Loader.
Up arrow icon