AutoComplete: New Feature - Loading Indicator & CancellationToken by mthrift2100 · Pull Request #3096 · MudBlazor/MudBlazor

mthrift2100 · 2021-10-19T16:08:55Z

Description

Adds the following parameters to support a visual indicator for loading/progress while the MudAutoComplete component is awaiting the results of the SearchFunc Task.

[Parameter] public bool ShowLoading { get; set; }
[Parameter] public Size LoadingSize { get; set; } = Size.Medium;
[Parameter] public Color LoadingColor { get; set; } = Color.Default;
[Parameter] public int MinHeight {get; set;}

Adds a [Parameter] public Func<string, CancellationToken, Task<IEnumerable<T>>> SearchFuncWithCancel { get; set; } parameter which can be used instead of [Parameter] public Func<string, Task<IEnumerable<T>>> SearchFunc { get; set; }.
This allows a CancellationToken to be be passed into the SearchFunc by the MudAutoComplete component. The token is cancelled when the following methods are called:

Task OnSearchAsync()
Task SelectOption(T value)

This allows for expensive asynchronous work to be cancelled before the result is returned, and can then more quickly process the next search (if the user changed the search value).

How Has This Been Tested?

All existing Unit Tests for AutoComplete ran successfully.
Created AutocompleteTestCancellation.razor in MudBlazor.UnitTests.Viewer->TestComponents->Autocomplete to test the Loading and Cancellation functionality.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

The PR is submitted to the correct branch (dev).
My code follows the code style of this project.
I've added relevant tests.

…for you.

mckaragoz · 2021-10-19T21:17:37Z

I think if we add a progress, it should be linear, not circular, because MudTable etc. uses linear also. Material guides said that we should select one progress type for whole application for consistency.

mthrift2100 · 2021-10-19T23:03:28Z

Using the linear progress indicator would be easier. It would eliminate the need for a MinHeight / LoadingSize parameter, and could be applied to the bottom edge of the Input control.

I think a loading indicator is essential, as is cancellation functionality. In a production setting, the SearchFunc will almost certainly be making an API call to a server, which means there is no guarantee of how long it will take to return a result. A loading indicator will help the user understand what is happening when they start typing.

If any of the following occur while the component is awaiting the results of the SearchFunc, the results of the SearchFunc will
be discarded. So passing a CancellationToken into the SearchFunc will allow the user to cancel expensive work that is almost certainty going to be wasted.

User changes search criteria
User makes a selection from the list that is already visible
Component loses focus.

JonBunator · 2021-10-21T18:11:49Z

src/MudBlazor.UnitTests.Viewer/TestComponents/Autocomplete/AutocompleteTestCancellation.razor

@@ -0,0 +1,53 @@
+@namespace MudBlazor.UnitTests.TestComponents


Can you please also add a bUnit test?

Acknowledged.

JonBunator · 2021-10-21T18:19:27Z

src/MudBlazor.UnitTests.Viewer/TestComponents/Autocomplete/AutocompleteTestCancellation.razor

@@ -0,0 +1,53 @@
+@namespace MudBlazor.UnitTests.TestComponents
+@using System.Threading


I agree with @mckaragoz that a linear progress bar makes more sense. Something like vuetify:

https://vuetifyjs.com/en/components/autocompletes/#asynchronous-items

Can you also add a RenderFragment that is displayed inside the popover while it's loading. Something like this in mui:

https://mui.com/components/autocomplete/#asynchronous-requests

Acknowledged. When I look at this a bit later, I may have a couple clarifying questions. Thanks!

@mthrift2100 Any updates with this feature. Will this be added to any of the upcoming releases

olegrumiancev · 2021-12-08T19:03:59Z

Hello everyone, definitely a good feature to have. My question is, after this is merged successfully, will it be available for .NET Core 5 version as well as 6? Thank you.

mckaragoz · 2021-12-08T22:07:43Z

Hello everyone, definitely a good feature to have. My question is, after this is merged successfully, will it be available for .NET Core 5 version as well as 6? Thank you.

I know that PR's will added and merged also in net 5, unless it has technical impossibilites with net 5. But of course net 5 cant support forever.

henon · 2021-12-24T18:22:25Z

Please merge dev and resolve the conflict.
Add categories to the new parameters
Write a test that uses the test component
Post a new gif to present how it looks after implementing the requested changes

Thanks.

Garderoben · 2022-04-13T10:05:48Z

Will close this for inactivity, just make new PR when you/it is ready.

artworkad · 2022-07-08T16:12:52Z

@henon @Garderoben I am working on a PR. However I am not sure how to test this. IsLoading is set from within OnSearchAsync. So I have to trigger that and see if the loading indicator is displayed. Not sure how to do that. What I've tried:

[Test]
public async Task Autocomplete_Should_ShowLoadingIndicatorBottom()
{
    var comp = Context.RenderComponent<MudAutocomplete<string>>((a) =>
    {
        a.Add(x => x.DebounceInterval, 0);
        a.Add(x => x.ShowLoadingIndicator, true);
        a.Add(x => x.SearchFunc, new Func<string, Task<IEnumerable<string>>>(async s =>
        {
            await Task.Delay(500);
            return new List<string> { "Foo", "Bar" };
        }));
    });

    comp.SetParam(a => a.Text, "Foo");
    comp.Markup.Should().Contain("mud-progress-circular");
}

I tested the implementation in the demo and it works fine.

henon · 2022-07-08T16:30:30Z

Not sure if it is that easy because of the popup implementation. Did you look if there are any other tests which check what is inside the drop-down? You could learn from them

mthrift2100 added 2 commits October 19, 2021 11:15

implement autocomlete loading indicator and cancellation token

b700a3d

Remove this initialization to 'MinHeight', the compiler will do that …

8fb2062

…for you.

JonBunator added the enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library label Oct 21, 2021

JonBunator suggested changes Oct 21, 2021

View reviewed changes

JonBunator added needs: changes A maintainer has asked for further modifications to be made to this pull request needs: tests A maintainer has explicitly asked for associated test cases to be added to this pull request labels Oct 21, 2021

mikes-gh changed the title ~~MudAutoComplete: New Feature - Loading Indicator & CancellationToken~~ AutoComplete: New Feature - Loading Indicator & CancellationToken Dec 2, 2021

mikes-gh force-pushed the dev branch from 6b9e55b to bbcfb70 Compare February 3, 2022 18:52

Garderoben closed this Apr 13, 2022

artworkad mentioned this pull request Jul 7, 2022

MudAutocomplete: Input value resets if StateHasChanged is called in SearchFunc #4061

Closed

2 tasks

artworkad mentioned this pull request Jul 11, 2022

Autocomplete: add progress indicator and cancellation token #4868

Merged

6 tasks

		@@ -0,0 +1,53 @@
		@namespace MudBlazor.UnitTests.TestComponents

		@@ -0,0 +1,53 @@
		@namespace MudBlazor.UnitTests.TestComponents
		@using System.Threading

Uh oh!

Conversation

mthrift2100 commented Oct 19, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Types of changes

Checklist:

Uh oh!

mckaragoz commented Oct 19, 2021

Uh oh!

mthrift2100 commented Oct 19, 2021

Uh oh!

JonBunator Oct 21, 2021

Choose a reason for hiding this comment

Uh oh!

mthrift2100 Oct 21, 2021

Choose a reason for hiding this comment

Uh oh!

JonBunator Oct 21, 2021

Choose a reason for hiding this comment

Uh oh!

mthrift2100 Oct 21, 2021

Choose a reason for hiding this comment

Uh oh!

NessfertIndia Nov 1, 2021

Choose a reason for hiding this comment

Uh oh!

olegrumiancev commented Dec 8, 2021

Uh oh!

mckaragoz commented Dec 8, 2021

Uh oh!

henon commented Dec 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Garderoben commented Apr 13, 2022

Uh oh!

artworkad commented Jul 8, 2022

Uh oh!

henon commented Jul 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

mthrift2100 commented Oct 19, 2021 •

edited

Loading

henon commented Dec 24, 2021 •

edited

Loading