microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications

Home Page:https://www.fluentui-blazor.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

fix: debounce using `ImmediateDelay` can throw an exception because of a race condition with `PeriodicTimer`.

ApacheTech opened this issue Β· comments

πŸ› Bug Report

Using the FluentSearch input box, but likely any debounce with ImmediateDelay, you can reliably force it to throw an exception, by firing the debounce while the PeriodicTimer is resetting itself. The exception shows that the CancellationToken used to reset the timer is set to cancelled, as the timer tries to tick.

πŸ’» Repro or Code Sample

@code {
    private string _searchTerm;
    private string? _results;

    private async Task OnSearchTermChangedAsync(string searchTerm)
    {
        _results = null;
        _searchTerm = searchTerm;
        var delay = (Random.Shared.Next(2, 5) * 100);
        await Task.Delay(delay);
        _results = $"{_searchTerm}: {delay}";
        StateHasChanged();
    }
}

<FluentSearch Immediate
              ImmediateDelay="300"
              Value="_searchTerm"
              ValueChanged="OnSearchTermChangedAsync" />

@if (!string.IsNullOrEmpty(_results))
{
    @_results;
}

πŸ€” Expected Behavior

The debouncing should work as if using the internal debouncer.

😯 Current Behavior

Occasionally (but predicably, and repeatedly) throws an exception saying the PeriodicTimer used to debounce the ValueChanged handler cannot be fired because it is in a cancelled state. This seems to be when the debounce is triggered at the same time the previous operation is finished.

πŸ’ Possible Solution

I have applied a workaround by using FluentUI's internal debouncer. I've copied this file into my application to expose it for use. Within your repo, it is internal. This works as expected, and I've had no issues with it, thus far. If debouncing is done via this, there should be no issues.

πŸ”¦ Context

I'm creating an API Docs Reference site, using Blazor8 InteractiveServer, OrchardCore CMS, FluentUI, Heroicons, and Tailwind. The FluentSearch is being used on the search page, streaming results to the page, as the user enters search terms. The search uses Lucene/Elasticsearch, using locally cached indexes.

🌍 Your Environment

OS: Windows 11
Browsers: Firefox, Chrome, Opera, Edge
Framework: .NET CoreCLR 8.0
FluentUI: v4.7.2
OrchardCore: v1.8.3

Will be fixed using #2042. Many thanks @ApacheTech :-)