fix(AutoComplete): studder on long running OnValueChanged function call (#5819)

* fix studder

* update

formatting

* Update AutoComplete.razor.js

studder fix will be applied immediately rather than after a second or two after the component loads

* Update AutoComplete.razor.cs

Added a fix for #5821

* rollback

undo fix for #5821

* Update AutoComplete.razor.cs

re-apply fix, but use main branch as reference

* Update AutoComplete.razor.cs

accidently added duplicate GetFilterItemsByValue, oops. now its removed

* refactor: 精简代码

* Revert "doc: 更新测试用例"

This reverts commit c15ac74.

* doc: 更新示例

* refactor: 精简 js 逻辑

* refactor: 使用 bind 防止卡顿

* refactor: 重构 show/closee 方法

* revert: 撤销 EnterCallback 参数

* doc: 更新测试用例

* refactor: 移除不使用的代码

* test: 更新单元测试

* refactor: 移除 TriggerChange 方法

---------

Signed-off-by: celadaris <[email protected]>
Co-authored-by: Argo Zhang <[email protected]>

Author: celadaris

src/BootstrapBlazor.Server/Components/Samples/AutoCompletes.razor

@@ -8,28 +8,28 @@
 <DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
     <section ignore>@Localizer["NormalDescription"]</section>
     <div style="width: 200px;">
-        <AutoComplete Items="@StaticItems" IsSelectAllTextOnFocus="true" Value="@Value"></AutoComplete>
+        <AutoComplete Value="@_value" Items="@StaticItems" IsSelectAllTextOnFocus="true"></AutoComplete>
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="LikeMatch">
     <section ignore>@Localizer["LikeMatchDescription"]</section>
     <div style="width: 200px;">
-        <AutoComplete Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
+        <AutoComplete Value="@_matchValue" Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="NoDataTip">
     <section ignore>@((MarkupString)Localizer["NoDataTipDescription"].Value)</section>
     <div style="width: 200px;">
-        <AutoComplete Items="@StaticItems" NoDataTip="@Localizer["NoDataTip"]" />
+        <AutoComplete Value="@_tipValue" Items="@StaticItems" NoDataTip="@Localizer["NoDataTip"]" />
     </div>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValueChanged">
+<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="OnCustomFilter">
     <section ignore>@Localizer["ValueChangedDescription"]</section>
     <div style="width: 200px;">
-        <AutoComplete Items="@Items" ValueChanged="@OnValueChanged" />
+        <AutoComplete Value="@_filterValue" Items="@Items" OnCustomFilter="OnCustomFilter" />
     </div>
 </DemoBlock>
 
@@ -48,12 +48,12 @@
 <DemoBlock Title="@Localizer["DebounceTitle"]" Introduction="@Localizer["DebounceIntro"]" Name="Debounce">
     <section ignore>@Localizer["DebounceDescription"]</section>
     <div style="width: 200px;">
-        <AutoComplete Items="@Items" ValueChanged="@OnValueChanged" Debounce="500" />
+        <AutoComplete @bind-Value="@_debounceValue" Items="@Items" Debounce="500" />
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["OnSelectedItemChangedTitle"]" Introduction="@Localizer["OnSelectedItemChangedIntro"]" Name="OnSelectedItemChanged">
-    <AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged" Debounce="500"></AutoComplete>
+    <AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
     <section ignore>
         <ConsoleLogger @ref="Logger" />
     </section>

src/BootstrapBlazor.Server/Components/Samples/AutoCompletes.razor.cs

@@ -18,16 +18,17 @@ public sealed partial class AutoCompletes
 
     private IEnumerable<string> Items => _items;
 
-    private string Value { get; set; } = "";
+    private string _value = "";
+    private string _matchValue = "";
+    private string _tipValue = "";
+    private string _filterValue = "";
+    private string _debounceValue = "";
 
-    private Task OnValueChanged(string val)
+    private static async Task<IEnumerable<string>> OnCustomFilter(string val)
     {
-        _items.Clear();
-        _items.Add($"{val}@163.com");
-        _items.Add($"{val}@126.com");
-        _items.Add($"{val}@sina.com");
-        _items.Add($"{val}@hotmail.com");
-        return Task.CompletedTask;
+        await Task.Yield();
+        var items = new List<string> { $"{val}@163.com", $"{val}@126.com", $"{val}@sina.com", $"{val}@hotmail.com" };
+        return items;
     }
 
     [NotNull]

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -12,7 +12,7 @@
            data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
            data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
            data-bb-scroll-behavior="@ScrollIntoViewBehaviorString" data-bb-trigger-delete="true"
-           value="@CurrentValueAsString"
+           @bind="@CurrentValueAsString"
            placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement"/>
     <span class="form-select-append"><i class="@Icon"></i></span>
     <span class="form-select-append ac-loading"><i class="@LoadingIcon"></i></span>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs

@@ -83,7 +83,7 @@ public partial class AutoComplete
     private List<string>? _filterItems;
 
     [NotNull]
-    private RenderTemplate? _dropdown = default;
+    private RenderTemplate? _dropdown = null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -119,14 +119,6 @@ protected override void OnParametersSet()
         LoadingIcon ??= IconTheme.GetIconByKey(ComponentIcons.LoadingIcon);
     }
 
-    private bool _render = true;
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    /// <returns></returns>
-    protected override bool ShouldRender() => _render;
-
     /// <summary>
     /// Callback method when a candidate item is clicked
     /// </summary>
@@ -168,7 +160,8 @@ public override async Task TriggerFilter(string val)
             _filterItems = [.. _filterItems.Take(DisplayCount.Value)];
         }
 
-        await TriggerChange(val);
+        // only render the dropdown menu
+        _dropdown.Render();
     }
 
     private List<string> GetFilterItemsByValue(string val)
@@ -179,34 +172,4 @@ private List<string> GetFilterItemsByValue(string val)
             : Items.Where(s => s.StartsWith(val, comparison));
         return [.. items];
     }
-
-    /// <summary>
-    /// TriggerChange method
-    /// </summary>
-    /// <param name="val"></param>
-    [JSInvokable]
-    public override Task TriggerChange(string val)
-    {
-        // client input does not need to be re-rendered to prevent jitter when the network is congested 
-        _render = false;
-        CurrentValue = val;
-        _render = true;
-        _dropdown.Render();
-        return Task.CompletedTask;
-    }
-
-    /// <summary>
-    /// TriggerChange method
-    /// </summary>
-    /// <param name="val"></param>
-    [JSInvokable]
-    public Task TriggerDeleteCallback(string val)
-    {
-        CurrentValue = val;
-        if (!ValueChanged.HasDelegate)
-        {
-            StateHasChanged();
-        }
-        return Task.CompletedTask;
-    }
 }

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js

@@ -9,7 +9,7 @@ export function init(id, invoke) {
     const el = document.getElementById(id)
     const menu = el.querySelector('.dropdown-menu')
     const input = document.getElementById(`${id}_input`)
-    const ac = { el, invoke, menu, input }
+    const ac = { el, invoke, menu }
     Data.set(id, ac)
 
     const isPopover = input.getAttribute('data-bs-toggle') === 'bb.dropdown';
@@ -36,67 +36,50 @@ export function init(id, invoke) {
         }
     }
 
-    // debounce
     const duration = parseInt(input.getAttribute('data-bb-debounce') || '0');
     if (duration > 0) {
         ac.debounce = true
-        EventHandler.on(input, 'keydown', debounce(e => {
-            handlerKeydown(ac, e);
-        }, duration, e => {
-            return ['ArrowUp', 'ArrowDown', 'Escape', 'Enter', 'NumpadEnter'].indexOf(e.key) > -1
-        }))
+        EventHandler.on(input, 'keyup', debounce(e => {
+            handlerKeyup(ac, e);
+        }, duration))
     }
     else {
-        EventHandler.on(input, 'keydown', e => {
-            handlerKeydown(ac, e);
+        EventHandler.on(input, 'keyup', e => {
+            handlerKeyup(ac, e);
         })
     }
 
-    EventHandler.on(input, 'keyup', e => handlerKeyup(ac, e));
-
-    ac.triggerBlur = () => {
-        el.classList.remove('show');
-        const triggerBlur = input.getAttribute('data-bb-blur') === 'true';
-        if (triggerBlur) {
-            invoke.invokeMethodAsync('TriggerBlur');
-        }
-    }
-
     EventHandler.on(menu, 'click', '.dropdown-item', e => {
-        ac.triggerBlur();
+        ac.close();
     });
 
     EventHandler.on(input, 'focus', e => {
         const showDropdownOnFocus = input.getAttribute('data-bb-auto-dropdown-focus') === 'true';
         if (showDropdownOnFocus) {
             if (isPopover === false) {
-                el.classList.add('show');
+                ac.show();
             }
         }
     });
 
-    EventHandler.on(input, 'change', e => {
-        invoke.invokeMethodAsync('TriggerChange', e.target.value);
-    });
-
-    let filterDuration = duration;
-    if (filterDuration === 0) {
-        filterDuration = 200;
-    }
-    const filterCallback = debounce(async v => {
-        await invoke.invokeMethodAsync('TriggerFilter', v);
-        el.classList.remove('is-loading');
-    }, filterDuration);
-
-    Input.composition(input, v => {
+    Input.composition(input, async v => {
         if (isPopover === false) {
-            el.classList.add('show');
+            ac.show();
         }
 
         el.classList.add('is-loading');
-        filterCallback(v);
+        await invoke.invokeMethodAsync('TriggerFilter', v);
+        el.classList.remove('is-loading');
     });
 
+    ac.show = () => {
+        ac.el.classList.add('show');
+    }
+
+    ac.close = () => {
+        ac.el.classList.remove('show');
+    }
+
     ac.closePopover = e => {
         [...document.querySelectorAll('.auto-complete.show')].forEach(a => {
             const ac = e.target.closest('.auto-complete');
@@ -109,7 +92,7 @@ export function init(id, invoke) {
                 const id = a.getAttribute('id');
                 const d = Data.get(id);
                 if (d) {
-                    d.triggerBlur();
+                    d.close();
                 }
             }
         });
@@ -121,23 +104,21 @@ export function init(id, invoke) {
 
 const handlerKeyup = (ac, e) => {
     const key = e.key;
-    const { el, input, invoke, menu } = ac;
+    const { el, invoke, menu } = ac;
     if (key === 'Enter' || key === 'NumpadEnter') {
         const skipEnter = el.getAttribute('data-bb-skip-enter') === 'true';
         if (!skipEnter) {
             const current = menu.querySelector('.active');
             if (current !== null) {
                 current.click();
-                ac.triggerBlur();
             }
-            invoke.invokeMethodAsync('EnterCallback', input.value);
+            invoke.invokeMethodAsync('EnterCallback');
         }
     }
     else if (key === 'Escape') {
         const skipEsc = el.getAttribute('data-bb-skip-esc') === 'true';
         if (skipEsc === false) {
             invoke.invokeMethodAsync('EscCallback');
-            ac.triggerBlur();
         }
     }
     else if (key === 'ArrowUp' || key === 'ArrowDown') {
@@ -159,29 +140,6 @@ const handlerKeyup = (ac, e) => {
         current.classList.add('active');
         scrollIntoView(el, current);
     }
-    else if (key === 'Backspace' || key === 'Delete') {
-        if (input.getAttribute('data-bb-trigger-delete') === 'true') {
-            invoke.invokeMethodAsync('TriggerDeleteCallback', input.value);
-        }
-    }
-}
-
-const handlerKeydown = (ac, e) => {
-    if (e.key === 'Tab') {
-        ac.triggerBlur();
-    }
-}
-
-export function showList(id) {
-    const ac = Data.get(id)
-    if (ac) {
-        if (ac.popover) {
-            ac.popover.show();
-        }
-        else {
-            ac.el.classList.add('show');
-        }
-    }
 }
 
 export function dispose(id) {
@@ -196,17 +154,15 @@ export function dispose(id) {
                 EventHandler.off(input, 'focus')
             }
         }
-        EventHandler.off(input, 'change');
-        EventHandler.off(input, 'keydown');
-        EventHandler.off(input, 'keyup');
         EventHandler.off(menu, 'click');
+        EventHandler.off(input, 'keyup');
         Input.dispose(input);
-
-        const { AutoComplete } = window.BootstrapBlazor;
-        AutoComplete.dispose(id, () => {
-            EventHandler.off(document, 'click', ac.closePopover);
-        });
     }
+
+    const { AutoComplete } = window.BootstrapBlazor;
+    AutoComplete.dispose(id, () => {
+        EventHandler.off(document, 'click', ac.closePopover);
+    });
 }
 
 const scrollIntoView = (el, item) => {

src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs

@@ -178,14 +178,6 @@ public async Task TriggerBlur()
     [JSInvokable]
     public virtual Task TriggerFilter(string val) => Task.CompletedTask;
 
-    /// <summary>
-    /// TriggerChange 方法
-    /// </summary>
-    /// <param name="val"></param>
-    /// <returns></returns>
-    [JSInvokable]
-    public virtual Task TriggerChange(string val) => Task.CompletedTask;
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs

@@ -295,7 +295,7 @@ public override async Task TriggerFilter(string val)
     /// </summary>
     /// <param name="val">The value to change to.</param>
     [JSInvokable]
-    public override Task TriggerChange(string val)
+    public Task TriggerChange(string val)
     {
         _displayText = val;
         StateHasChanged();

src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs

@@ -213,11 +213,10 @@ protected virtual async Task OnBlur()
     /// </summary>
     /// <returns></returns>
     [JSInvokable]
-    public async Task EnterCallback(string val)
+    public async Task EnterCallback()
     {
         if (OnEnterAsync != null)
         {
-            CurrentValueAsString = val;
             await OnEnterAsync(Value);
         }
     }

src/BootstrapBlazor/Components/Search/Search.razor.cs

@@ -289,7 +289,7 @@ private async Task OnClickItem(TValue val)
     /// </summary>
     /// <param name="val"></param>
     [JSInvokable]
-    public override async Task TriggerChange(string val)
+    public async Task TriggerChange(string val)
     {
         _render = false;
         _displayText = val;