DropdownLis not working properly with ShowClearButton

[Thibaut Gobert]

Hi,

I found an issue with SfDropDownList when using a nullable enum value with a KeyValuePair data source.

Repro:

https://blazorplayground.syncfusion.com/VtVnjGjKTIUieOWM

The component is configured with:

- TValue="EIssue?"

- TItem="KeyValuePair<EIssue, string>"

- ShowClearButton="true"

- DropDownListFieldSettings Value="Key"

The enum is defined like this:

public enum EIssue

{

    Positive, // underlying value: 0

    Negative, // underlying value: 1

    Cancelled // underlying value: 2

}

Expected behavior:

Clicking the clear button should clear the selected value and trigger ValueChange with args.Value = null.

Actual behavior:

- When the selected value is Positive, which is the first enum value and has the underlying value 0, clicking the clear button does not trigger ValueChange at all.

- When the selected value is Negative or Cancelled, clicking the clear button triggers ValueChange, but args.Value is Positive / 0 instead of null.

This makes it impossible to distinguish between clearing the selection and selecting the first enum value.

It looks like the clear action is assigning default(EIssue), which is 0, instead of null for the nullable enum TValue.

[Priyanka Karthikeyan]

Hi Thibaut Gobert,

Thank you for reaching out.

To resolve the issue with nullable enums and the clear button in SfDropDownList, we recommend converting the enum values to a list of objects with explicit properties. This approach provides better type safety and compatibility with the DropDownList component.

Problem Description

When using DropDownList with a nullable enum (TValue="EIssue?") and a KeyValuePair data source, clicking the clear button has the following issues:

1. When the selected value is Positive (underlying value 0): The ValueChange event does not fire at all.
2. When the selected value is Negative or Cancelled: The ValueChange event fires, but args.Value is Positive / 0 instead of null.

This makes it impossible to distinguish between clearing the selection and selecting the first enum value.

Recommended Solution

Instead of binding enum values directly or using KeyValuePair, create a model class with explicit properties and bind a list of that model to the DataSource.

---

Complete Runnable Code

@using Syncfusion.Blazor.DropDowns
@using System.Collections.Generic

<h3>SfDropDownList Nullable Enum - Complete Solution</h3>
<p style="color: #666; font-size: 13px; margin-bottom: 15px;">
    Solution: Convert enum to list of objects with explicit properties
</p>

<div style="display: flex; gap: 10px; align-items: center;">
    <SfDropDownList TValue="EIssue?"
                    TItem="IssueModel"
                    DataSource="@Issues"
                    Value="@SelectedIssue"
                    ValueExpression="@(() => SelectedIssue)"
                    Placeholder="Select an issue"
                    ShowClearButton="true"
                    Width="300px">
        <DropDownListFieldSettings Text="Text" Value="Value" />
        <DropDownListEvents TValue="EIssue?"
                            TItem="IssueModel"
                            ValueChange="@OnValueChange" />
    </SfDropDownList>
</div>

<div style="margin-top: 25px; padding: 15px; background-color: #f5f5f5; border-radius: 4px;">
    <p><strong>Selected Issue:</strong> 
        <span style="font-weight: bold; color: #0078d4; font-size: 15px;">
            @(SelectedIssue?.ToString() ?? "NULL")
        </span>
    </p>
    <p><strong>Events Triggered:</strong> @EventCount</p>
    <p><strong>Last Event:</strong> @LastEventDescription</p>
</div>

<button class="e-btn e-secondary" @onclick="ResetLog" style="margin-top: 10px;">
    Reset
</button>

<h4>Event Log</h4>
<div style="border: 1px solid #ccc; padding: 10px; max-height: 250px; overflow-y: auto; background-color: #fafafa; font-family: 'Courier New', monospace; font-size: 12px;">
    @if (Log.Count == 0)
    {
        <p style="color: #999;"><em>No events logged yet. Select a value or click Clear.</em></p>
    }
    else
    {
        <ol style="margin: 0; padding-left: 20px;">
            @foreach (var entry in Log)
            {
                <li style="padding: 4px 0; line-height: 1.4;">@entry</li>
            }
        </ol>
    }
</div>

@code {
    /// <summary>
    /// Enum definition
    /// </summary>
    public enum EIssue
    {
        Positive,   // Value: 0
        Negative,   // Value: 1
        Cancelled   // Value: 2
    }

    /// <summary>
    /// Model class with explicit properties for proper DataSource binding
    /// </summary>
    public class IssueModel
    {
        public EIssue Value { get; set; }
        public string Text { get; set; }
    }

    private EIssue? SelectedIssue = EIssue.Positive;
    private int EventCount = 0;
    private string LastEventDescription = "None";
    private List<string> Log = new();

    /// <summary>
    /// DataSource - List of objects with explicit properties
    /// This is the recommended approach for binding enum values
    /// </summary>
    private List<IssueModel> Issues = new()
    {
        new IssueModel { Value = EIssue.Positive, Text = "Positive" },
        new IssueModel { Value = EIssue.Negative, Text = "Negative" },
        new IssueModel { Value = EIssue.Cancelled, Text = "Cancelled" }
    };

    /// <summary>
    /// Handles value change events
    /// </summary>
    private void OnValueChange(ChangeEventArgs<EIssue?, IssueModel> args)
    {
        EventCount++;
        var previousValue = SelectedIssue;
        SelectedIssue = args.Value;

        LastEventDescription = $"{Format(previousValue)} → {Format(args.Value)}";
        var logEntry = $"[Event #{EventCount}] {Format(previousValue)} → {Format(args.Value)}";
        Log.Insert(0, logEntry);
    }

    private void ResetLog()
    {
        Log.Clear();
        EventCount = 0;
        LastEventDescription = "None";
        SelectedIssue = EIssue.Positive;
    }

    private static string Format(EIssue? value)
    {
        return value?.ToString() ?? "NULL";
    }
}

<style>
    .e-btn {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        background-color: #fff;
        font-size: 14px;
        transition: all 0.2s ease;
    }

    .e-btn:hover {
        background-color: #f5f5f5;
        border-color: #999;
    }

    .e-secondary {
        background-color: #f3f2f1;
        border-color: #8a8886;
        color: #201f1e;
    }

    .e-secondary:hover {
        background-color: #edebe9;
    }
</style>

Sample: https://blazorplayground.syncfusion.com/embed/hZrHZctmonftdPBZ?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2

For More Information

Please refer to the official Syncfusion documentation on data binding for the Blazor DropDownList component for detailed examples and best practices:

Data Binding in Blazor DropDownList Component

Regards,

Priyanka K