Problem when using the component inside the wrapper

I have created a Custom wrapper component around SfDropDownList, and I want to use it in the rest of my application. It has Value and OnChange parameters which I have bound to Value / ValueChange respectively (full code at the end of the post). But when I try to use it it causes two types of problems: If I don't call StateHasChanged in the parent component handler, the value is not set in the SfDropdownList If I call StateHasChanged in the parent component handler, ValueChange gets triggered twice: once with new value, and once with previous value, causing the SfDropdownList to always be set to the first value. Your documentation mostly everywhere uses @bind-Value which I don't want to use in my case. Do you have any suggestions or is this a bug on your end? CustomWrapper : @typeparam TValue @typeparam TItem public partial class CustomSelectBox { [Parameter, EditorRequired] public TValue Value { get; set; } = default!; [Parameter, EditorRequired] public string OptionDisplay { get; set; } = default!; [Parameter, EditorRequired] public string OptionValue { get; set; } = default!; [Parameter, EditorRequired] public IEnumerable Data { get; set; } = default!; [Parameter] public Action? OnChange { get; set; } } Parent component:

5 Replies

AM Amar April 4, 2023 07:43 AM UTC



<SfDropDownList TItem="TItem" TValue="TValue" Value="@BindingValue" DataSource="@Data">

        <DropDownListEvents TItem="TItem" TValue="TValue" ValueChange="@((args) => OnChange?.Invoke(args.Value))"></DropDownListEvents>

        <DropDownListFieldSettings Text="@OptionDisplay" Value="@OptionValue" />

    </SfDropDownList>



AM Amar April 4, 2023 07:43 AM UTC

public partial class CustomSelectBox


{


[Parameter] public TValue BindingValue { get; set; } = default!;


[Parameter, EditorRequired] public string OptionDisplay { get; set; } = default!;


[Parameter, EditorRequired] public string OptionValue { get; set; } = default!;


[Parameter, EditorRequired] public IEnumerable Data { get; set; } = default!;


[Parameter] public Action? OnChange { get; set; }

}



AM Amar April 4, 2023 07:43 AM UTC

            <CustomSelectBox TItem="@int" TValue="@int?" Value="@Model.Year" Data="@YearRange" OptionDisplay="@(nameof(Model.Year))" OptionValue="@(nameof(Model.Year))" OnChange="@((value) => Model.Year = value)">


                        </CustomSelectBox>



AM Amar April 4, 2023 07:44 AM UTC

There are

@typeparam TValue

@typeparam TItem
as well in the CustomSelectBox razor which your forum text editor for some reason deletes.



UD UdhayaKumar Duraisamy Syncfusion Team April 7, 2023 01:01 PM UTC

Based on the information you provided, we suspect that you are experiencing difficulty using the DropDownList as a custom component. You can refer to the Syncfusion forums shared below for assistance with your requirements.


Forums:



Loader.
Up arrow icon