fluentui-blazor
fluentui-blazor copied to clipboard
fix: debounce using `ImmediateDelay` can throw an exception because of a race condition with `PeriodicTimer`.
🐛 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