Dropdown List - cannot clear a binded value if AllowFiltering is true

[Julien Barach]

Hi,

On the Dropdown List component if I enable ShowClearButton and AllowFiltering, I'll need to select another value before being able to clear the field.

The clear button should be visible from the start of remains visible after the first click.

Repro link : https://blazorplayground.syncfusion.com/rXBTtUZwKvYAwrtq

Or code :

@page "/DropDown-List/Default-Functionalities"
@using Syncfusion.Blazor.DropDowns
<divclass="col-lg-12">
    <divclass="col-lg-8 control-section sb-property-border">
        <divclass="control-wrapper">
            <labelclass="example-label">Select a game</label>
            <SfDropDownListTItem="GameFields"TValue="string"PopupHeight="230px"AllowFiltering="true"ShowClearButton="true"  Placeholder="e.g. Basketball"@bind-Value="@DropDownValue"DataSource="@Games">
                <DropDownListEventsTItem="GameFields"TValue="string"ValueChange="OnChange"/>
                <DropDownListFieldSettingsText="Text"Value="ID"/>
            </SfDropDownList>
        </div>
    </div>
    <divclass="col-lg-4">
        <divclass="property-panel-section">
            <divclass="property-panel-header">Properties</div>
            <divclass="property-panel-content">
                <divclass="property-value">Selected Value : <b>@DropDownValue</b></div>
                <divclass="property-value">Selected Text : <b>@ChangeValue</b></div>
            </div>
        </div>
    </div>
</div>
@code{
    publicclass GameFields
    {
        publicstring ID { get; set; }
        publicstring Text { get; set; }
    }
    private List<GameFields> Games = new List<GameFields>() 
    {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Golf" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "Rugby"},
        new GameFields(){ ID= "Game9", Text= "Snooker" },
        new GameFields(){ ID= "Game10", Text= "Tennis"}
     };
    publicstring DropDownValue = "Game3";
    publicstring ChangeValue { get; set; } = "Basketball";
    publicvoid OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args)
    {
        this.ChangeValue = args.ItemData.Text;
    }
}

Regards

[Yohapuja Selvakumaran]

Hi Julien Barach,

Thank you for reaching out us. It seems like you're encountering a null reference exception when trying to clear the value of a dropdown in your Blazor application. The issue arises because the args.ItemData is null in the OnChange event handler when clearing the dropdown value.

To avoid the null reference exception, you can simply check if args.ItemData is null before accessing its properties. Here's how you can modify your OnChange event handler:

Code Snippet:

 

@using Syncfusion.Blazor.DropDowns

 

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="e.g. Basketball" @bind-Value="@DropDownValue" DataSource="@Games" AllowFiltering="true" ShowClearButton="true">

 <DropDownListEvents TItem="GameFields" TValue="string" ValueChange="OnChange" />

 <DropDownListFieldSettings Text="Text" Value="ID" />

 </SfDropDownList>

 

@code {

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"}

     };

    public string DropDownValue = "Game3";

    public string ChangeValue { get; set; } = "Basketball";

    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args)

    {

        if (args.ItemData != null)

        {

            this.ChangeValue = args.ItemData.Text;

        }

       

    }

}

 

 

 

Sample: https://blazorplayground.syncfusion.com/rtVzDAshIcKIAMIl

This change ensures that args.ItemData is checked for null before attempting to access its properties, thus preventing the null reference exception.

Regarding the visibility of the clear icon only when focusing the component, it's worth noting that this behavior is consistent with the default settings of the Syncfusion Blazor dropdown component. The clear icon is designed to be visible only when the component is in focus. This behavior ensures a cleaner and less cluttered UI, providing users with a clear indication of when they can interact with the clear functionality. If you have any further questions or concerns, please feel free to let us know.

Regards,

Yohapuja S