1. Home
  2. Forum
  3. Blazor
  4. Dropdown List ComboBox Does Not Close On Selection

Dropdown List ComboBox Does Not Close On Selection

Hello,

I have the following code:

<div class="mb-2">
				<div class="label">Signature Location:</div>
				<SfDropDownList TValue="SignatureLocation" TItem="DragonSpark.Presentation.Model.Option<SignatureLocation>" ID="Locations" Placeholder="- Select Location -" DataSource="@SignatureLocations.Default.Open()" @bind-Value="@Input.Location.Value" Enabled="@(!Receiver.Active)">
					<DropDownListFieldSettings Text="@(nameof(DragonSpark.Presentation.Model.Option<>.Name))" Value="@(nameof(DragonSpark.Presentation.Model.Option<>.Value))"/>
					<DropDownListEvents TValue="SignatureLocation" TItem="DragonSpark.Presentation.Model.Option<SignatureLocation>" ValueChange="@OnLocationChanged" />
				</SfDropDownList>
</div>

Note the `ValueChange` which is this:

Task OnLocationChanged()
{
	ApplyLocation.Default.Execute(Input.Location);
	return _after(); // <-- Lots happens here
}

The problem I am experiencing with 33.2.12 is that the combobox is not closed and stays open while OnLocationChanged is invoked.  Here's a recording of what I am seeing:

https://i.imgur.com/MxHmduZ.gif

This seems like a new regression and did not happen in previous versions.  Is there a new setting I am overlooking, perhaps?  The expectation is that the combobox would close before executing any callbacks.

Thank you for any assistance you can provide.


14 Replies 1 reply marked as answer
PK Priyanka Karthikeyan Syncfusion Team June 15, 2026 01:33 PM UTC

Hi Mike-E,
Thank you for reporting this issue.
We understand that in version 33.2.12, the dropdown component does not close immediately upon selection when the ValueChange event handler contains async operations. This behavior differs from previous versions where the dropdown would close before executing the callback.
Workaround:
While we investigate this further as a potential regression, please try the following workaround:
Option 1: Use OnValueSelect event instead of ValueChange
 
​<DropDownListEvents TValue="SignatureLocation" TItem="Option<SignatureLocation>" 
                    OnValueSelect="@OnLocationSelected" />
 
Option 2: Manually close the popup in your event handler
 
​async Task OnLocationChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<SignatureLocation, Option<SignatureLocation>> args)
{
    // Find the dropdown component and close it
    var dropdown = (SfDropDownList<SignatureLocation, Option<SignatureLocation>>)Locator.Current.GetService($"Locations");
    await dropdown.HidePopupAsync();

    // Your async logic here
    await ApplyLocation.Default.Execute(Input.Location);
    return _after();
}
Option 3: Wrap your async logic in InvokeAsync to allow UI to update
​async Task OnLocationChanged()
{
    await InvokeAsync(async () =>
    {
        await Task.Delay(10); // Small delay to allow UI update
        await ApplyLocation.Default.Execute(Input.Location);
        await _after();
    });
}
Additional Information Needed:
To better investigate this as a potential regression, could you please share the following:
  1. Previous working version - Which version did this work correctly in?
  2. Simple reproducible sample - A minimal sample demonstrating the issue without external dependencies
  3. Video illustration 
Thank you for your understanding and cooperation.
Regards,
Priyanka K

Attachment: DropDownList_1f7918fa.zip

MI Mike-E June 16, 2026 07:26 AM UTC

Hi Priyanka, thank you very much for your reply and investigation.  I see that the sample you provided is 21.* and replicates this issue perfectly.  So, perhaps I am mistaken with a previous version working as expected and I am just now realizing this issue, which seems like a defect.  The drop down is still visible and interactive while the loading screen is displayed and can lead to unintended interaction and thus behavior before the loading is completed.

Please also be aware that OnValueSelect also produces this issue.  As you have a solution that reproduces this issue as reported, I am not sure how valuable a video of it is, but here it is in any case: https://i.imgur.com/27qHSpm.gif

Finally, please be aware that none of your workarounds seem to cleanly address this issue, either.  Only HidePopupAsync on the list reference hides the combobox, but it also hides the loading screen, too, for some reason. 


PK Priyanka Karthikeyan Syncfusion Team June 17, 2026 02:35 PM UTC

Hi Mike,


Thank you for the update.

We have verified the scenario, and the HidePopupAsync method works as expected in this case. Using this method ensures that the dropdown popup is closed properly before triggering further asynchronous operations.

For your reference, we have provided a sample code snippet and a video illustration below demonstrating the correct implementation.

 

​@page "/"
@using Syncfusion.Blazor.DropDowns

<h3>Dropdown List - Close On Selection Issue</h3>

<div class="mb-2">
    <div class="label">Signature Location:</div>
    <SfDropDownList TValue="string" @ref="dropdownRef"
                    TItem="OptionModel" ID="Locations"
                    Placeholder="- Select Location -"
                    DataSource="@Options"
                    @bind-Value="@SelectedValue">
        <DropDownListFieldSettings Text="Name" Value="Value" />
        <DropDownListEvents TValue="string" TItem="OptionModel"
                            ValueChange="@OnLocationChanged" />
    </SfDropDownList>
</div>

@if (IsLoading)
{
    <div class="spinner-overlay">
        <div class="spinner"></div>
        <p>Loading...</p>
    </div>
}

<p>Selected Value: @SelectedValue</p>
<p>Event Fired: @EventCount times</p>

@code {
    public class OptionModel
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }

    private string SelectedValue { get; set; }
    private int EventCount { get; set; }
    private bool IsLoading { get; set; }
    private SfDropDownList<string, OptionModel> dropdownRef;

    private List<OptionModel> Options = new List<OptionModel>
    {
        new OptionModel { Name = "Option 1", Value = "opt1" },
        new OptionModel { Name = "Option 2", Value = "opt2" },
        new OptionModel { Name = "Option 3", Value = "opt3" },
        new OptionModel { Name = "Option 4", Value = "opt4" }
    };

    async Task OnLocationChanged(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, OptionModel> args)
    {
        EventCount++;

        // Step 1: Close the popup immediately (non-blocking)
        await dropdownRef.HidePopupAsync();

        // Step 2: Trigger UI update to close popup BEFORE async operation
        await InvokeAsync(StateHasChanged);

        // Small delay to ensure popup animation completes
        await Task.Delay(50);

        // Step 3: Now perform async operation with spinner
        IsLoading = true;
        await Task.Delay(2000);
        IsLoading = false;

        await OnLocationChanged1();
    }

    Task OnLocationChanged1()
    {
        Console.WriteLine($"Location changed to: {SelectedValue}");
        return Task.CompletedTask;
    }
}

<style>
    .mb-2 {
        margin-bottom: 16px;
    }

    .label {
        font-weight: bold;
        margin-bottom: 4px;
    }

    .spinner-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        flex-direction: column;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        border-right-color: #e74c3c;
        border-bottom-color: #2ecc71;
        border-left-color: #f1c40f;
        animation: spin 1s linear infinite;
    }

    @@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .spinner-overlay p {
        color: white;
        font-weight: bold;
        margin-top: 10px;
    }
</style>

 


Regards,

Priyanka K


MI Mike-E June 18, 2026 06:50 AM UTC

Hi Priyanka, thank you very much for the reply and conversation.  I understand that the HidePopupAsync call hides the popup, but why must the user be forced to call this for basic interaction with your control during long-running operations?  Are you saying it is currently expected that the design and functionality keep the combobox displayed during long-running operations, and allow the user to interact with your control during this time?  This is difficult to understand if so.

This seems like a defect that must be fixed, not worked around.  I hope you can understand the concern.  Please let me know if I have misunderstood.


PK Priyanka Karthikeyan Syncfusion Team June 19, 2026 12:44 PM UTC

Hi Mike-E,
Thank you for your detailed report and for providing the reproducible sample. We appreciate your patience while we investigated this behavior.
We've confirmed that the DropDownList component remains open and interactive while async operations are executing in the ValueChange event handler. This prevents users from dismissing the dropdown before the operation completes and allows unintended interactions during processing.
Root Cause
The ValueChange event fires while the dropdown popup is still in its active interaction state. Any async operations (await statements) in the handler keep the event handler active, which delays the popup closure until all operations complete. This behavior is consistent across all Syncfusion Blazor versions.
Recommended Solution: Use the Closed Event
The proper solution is to handle your async operations in the Closed event instead of ValueChange. The Closed event fires after the dropdown popup has completely closed, ensuring the component is locked before your async work begins:
@page "/"
@using Syncfusion.Blazor.DropDowns

<h3>Dropdown List - Proper Implementation</h3>

<div class="mb-2">
    <div class="label">Signature Location:</div>
    <SfDropDownList TValue="string" @ref="dropdownRef"
                    TItem="OptionModel" ID="Locations"
                    Placeholder="- Select Location -"
                    DataSource="@Options"
                    @bind-Value="@SelectedValue">
        <DropDownListFieldSettings Text="Name" Value="Value" />
        <DropDownListEvents TValue="string" TItem="OptionModel"
                            Closed="@OnDropdownClosed" />
    </SfDropDownList>
</div>

@if (IsLoading)
{
    <div class="spinner-overlay">
        <div class="spinner"></div>
        <p>Loading...</p>
    </div>
}

<p>Selected Value: @SelectedValue</p>

@code {
    public class OptionModel
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }

    private string SelectedValue { get; set; }
    private bool IsLoading { get; set; }
    private SfDropDownList<string, OptionModel> dropdownRef;

    private List<OptionModel> Options = new List<OptionModel>
    {
        new OptionModel { Name = "Option 1", Value = "opt1" },
        new OptionModel { Name = "Option 2", Value = "opt2" },
        new OptionModel { Name = "Option 3", Value = "opt3" },
        new OptionModel { Name = "Option 4", Value = "opt4" }
    };

    async Task OnDropdownClosed(ClosedEventArgs args)
    {
        // At this point, the dropdown is completely closed and locked
        // User cannot interact with it during the following async operations
       
        IsLoading = true;
       
        // Your async operations here (API calls, data processing, etc.)
      //  await ApplyLocation.Default.Execute(SelectedValue);
        await Task.Delay(2000);  // Simulating API call
       
        IsLoading = false;
    }
}

<style>
    .mb-2 {
        margin-bottom: 16px;
    }

    .label {
        font-weight: bold;
        margin-bottom: 4px;
    }

    .spinner-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        flex-direction: column;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        border-right-color: #e74c3c;
        border-bottom-color: #2ecc71;
        border-left-color: #f1c40f;
        animation: spin 1s linear infinite;
    }

    @@keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .spinner-overlay p {
        color: white;
        font-weight: bold;
        margin-top: 10px;
    }
</style>


Key Benefits
Aspect
Before (ValueChange)
After (Closed)
Dropdown State
Remains open
Fully closed
User Interaction
Still possible
Prevented
Loading Spinner
Visible with open dropdown
Clean display
Async Execution
During interaction
After interaction completes
Why This Works Better
✅ The dropdown popup closes immediately when the user makes a selection
✅ The component is locked before any async operations begin
✅ Users cannot accidentally re-select or interact during processing
✅ The loading spinner displays without dropdown interference
✅ Provides a predictable, professional user experience
Alternative: If You Need Value Change Tracking
If you need to track value changes separately, you can combine both events:
async Task OnValueChanged(ChangeEventArgs<string, OptionModel> args)
{
    // Just log or track the value change if needed
    Console.WriteLine($"Value changed to: {args.Value}");
}

async Task OnDropdownClosed(ClosedEventArgs args)
{
    // Execute async operations after dropdown is closed
    IsLoading = true;
    await Task.Delay(2000);
    IsLoading = false;
}

Testing Verification
We've verified this solution works correctly in the shared sample . The dropdown now closes immediately upon selection, and the loading indicator appears cleanly without the dropdown remaining interactive.
Please implement this change and let us know if you have any questions or if this resolves your issue.
Resources
Regards,
Priyanka K

MI Mike-E June 20, 2026 09:02 AM UTC

Hi Priyanka,


Thank you for the reply and continued dialogue; it is appreciated.  I did try the Closed event, and it works better, but there is a problem.  When the combobox is open and the user scrolls the page, it closes and triggers the event, even though the value hasn't changed.  This invokes the callback even though the user has not selected a new value.

Additionally, if I understand correctly, you do not consider the above a defect, and I would like to better understand why you do not think so.  The combobox is displayed, the user selects an entry, and the callbacks are subsequently called -- all the while, the combobox remains visible after the user has made a selection and is still available for further interaction while callbacks are being processed.  To me, this seems like a bug.  If you can provide a scenario in which it would be desirable for the combobox to remain open while long-running operations execute, it would be valuable to my understanding of your thinking.

At the very least, if there are viable scenarios where the combobox should remain open during long-running operations, a property such as CloseOnSelect should be introduced for the other scenarios where this is not desirable.

Thank you for your consideration.


PK Priyanka Karthikeyan Syncfusion Team June 23, 2026 02:06 PM UTC

Hi Mike-E,
Thank you for your continued feedback and for clearly outlining your requirements and concerns regarding the DropDownList behavior during async operations.
Summary of the Issue:
  • When performing async operations in the ValueChange event, the DropDownList remains open and interactive until the operation completes. This can lead to unintended user interactions.
  • Using the Closed event ensures the dropdown is closed before async work begins, but it may fire even when the value hasn’t changed (e.g., if the user scrolls the page).
Why This Happens:
  • The ValueChange event is triggered before the dropdown popup is closed. If the event handler is async, the popup remains open until the handler completes.
  • The Closed event fires whenever the dropdown closes, regardless of the reason (selection, scroll, blur, etc.).
Recommended Solution:
To provide the best user experience and prevent unnecessary async operations, we recommend using the Closed event in combination with value tracking. This ensures your async logic only runs when the value actually changes, and only after the dropdown is fully closed.
Sample Implementation:
<SfDropDownList TValue="string" @ref="dropdownRef"
                TItem="OptionModel" ID="Locations"
                Placeholder="- Select Location -"
                DataSource="@Options"
                @bind-Value="@SelectedValue">
    <DropDownListFieldSettings Text="Name" Value="Value" />
    <DropDownListEvents TValue="string" TItem="OptionModel"
                        Closed="@OnDropdownClosed" />
</SfDropDownList>
@if (IsLoading)
{
    <div class="spinner-overlay">
        <div class="spinner"></div>
        <p>Loading...</p>
    </div>
}
@code {
    private string SelectedValue { get; set; }
    private string _lastValue;
    private bool IsLoading { get; set; }
    private SfDropDownList<string, OptionModel> dropdownRef;
    private async Task OnDropdownClosed(Syncfusion.Blazor.DropDowns.ClosedEventArgs args)
    {
        // Only run async logic if the value actually changed
        if (SelectedValue != _lastValue)
        {
            IsLoading = true;
            await InvokeAsync(StateHasChanged);
            // Simulate async operation (replace with your logic)
            await Task.Delay(2000);
            IsLoading = false;
            await InvokeAsync(StateHasChanged);
            _lastValue = SelectedValue;
        }
    }
    protected override void OnInitialized()
    {
        _lastValue = SelectedValue;
    }
}

 
Key Points:
  • The async operation only runs if the value actually changed.
  • The dropdown is always closed before the async operation starts.
  • The spinner overlays the UI during async work, preventing further interaction.
  • No unnecessary calls if the dropdown closes due to scrolling or blur.
About CloseOnSelect and Manual Control:
A CloseOnSelect property would provide developers with explicit control to close the dropdown immediately upon selection, regardless of any ongoing async operations. This would help prevent unintended interactions and ensure a smoother, more predictable experience for end users.
Currently, this behavior can be achieved programmatically using the HidePopupAsync and ShowPopupAsync methods. By calling HidePopupAsync in your event handler, you can manually close the dropdown as soon as a selection is made, before starting any async processing.
Conclusion:
This approach ensures a professional and predictable user experience, addressing both the need to close the dropdown immediately and to avoid unnecessary async operations. If you have further questions or need additional customization, please let us know.
Thank you for helping us improve our components!
Regards,
Priyanka K

MI Mike-E June 24, 2026 08:21 AM UTC

Hi Priyanka,

Thank you for your reply, continued suggestions, and the time and effort required to do this.  I appreciate you taking the time to suggest potential workarounds, but they seem to be getting more elaborate and complicated, saddling the end user with additional code that should be under the responsibility of your component.  

This is exacerbated by the fact that I have directly asked you why you do not consider the initial root cause of this issue a defect, and I have yet to receive a reply.

Before we continue, could you please explain why you and your team do not consider the original cause of this issue a defect?  You have confirmed that it leads to unintended user interaction with your control, which suggests it should be a priority to address.

Please let me know if I have misunderstood your reply and if you are indeed planning to fix this perceived defect.

Thank you,

Michael


PK Priyanka Karthikeyan Syncfusion Team July 2, 2026 02:24 PM UTC

Hi Mike-E,

 

We have considered this issue "DropDownList Popup Closes with Delay When Selecting Value with Async Operation in valueChange Event" as a bug from our end and the fix for this issue will be included in our upcoming weekly release, which is currently scheduled for the end of July 2026.

 

You can now track the status of the feedback through the below link,

 

Feedback link:DropDownList Popup Closes with Delay When Selecting Value with Async Operation in valueChange Event…

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

 

Regards,

Priyanka K


MI Mike-E July 6, 2026 06:45 AM UTC

Hi Priyanka and team,

That is very good news.  I greatly appreciate your dedication and diligence in maintaining the quality of your offering, as well as the excellent support that ensures it is such!

Thank you,

Michael


PK Priyanka Karthikeyan Syncfusion Team July 30, 2026 12:05 PM UTC

Hi Mike-E,

We apologize for the inconvenience caused.

We are actively working on a fix for the reported issue. Please be assured that our development team is addressing it, and the fix is planned to be included in an upcoming patch release scheduled for mid-August 2026.

We appreciate your understanding and patience while we work to resolve this matter. We will keep you informed of any further updates regarding the fix.

Regards,
Priyanka K


MI Mike-E July 31, 2026 05:47 AM UTC

Great, thank you for the update and for your efforts Priyanka!  They are greatly appreciated. 🙏


GS Gokul Saravanan Syncfusion Team August 14, 2026 11:46 AM UTC

Hi Mike-E,


We have included the fix for the issue  " DropDownList Popup Closes with Delay When Selecting Value with Async Operation in valueChange Event "  with our release version 34.2.2. So please upgrade your package to the latest to resolve the issue from your end.

Release notes:   Essential Studio for Blazor Release Notes

Sample :  Syncfusion Blazor Playground: Write,Edit,Compile, Share Code

 

Root cause : The ValueChange event was triggered synchronously. As a result, any asynchronous operations executed within the ValueChange event handler were also processed synchronously, preventing the popup from closing immediately.



Marked as answer
MI Mike-E August 14, 2026 04:38 PM UTC

Hi Gokul!  I can confirm that this is now working as expected in 34.2.x!  Thank you so much for your commitment to the quality of your excellent product!  You and your team are greatly appreciated. 🙏🙏🙏


Loader.
Up arrow icon