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

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.
Live Chat Icon For mobile
Up arrow icon