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

[celadaris]

Link issues

fixes #5812

Summary By Copilot

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Refactor the AutoComplete component to improve performance and reduce stuttering during value changes by simplifying event handling and removing unnecessary rendering logic.

Bug Fixes:

• Resolve performance issues with long-running OnValueChanged function calls in AutoComplete component
• Eliminate unnecessary re-renders and reduce input jitter

Enhancements:

• Simplify JavaScript event handling for AutoComplete component
• Optimize input composition and filtering logic
• Improve event management in AutoComplete JavaScript implementation

Tests:

• Update unit tests to reflect changes in AutoComplete component behavior

[bb-auto]

Thanks for your PR, @celadaris. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request addresses the issue of stuttering in the AutoComplete component when a long-running OnValueChanged function is called. The changes include refactoring the JavaScript event handling, enhancing component initialization and disposal, and improving dropdown menu rendering and data filtering. These changes aim to improve performance, prevent memory leaks, and enhance the overall user experience.

Sequence diagram for handling keyup events in AutoComplete

sequenceDiagram
  participant Input as Input Field
  participant AutoComplete as AutoComplete Component
  participant Invoke as DotNet Invoke

  Input->>AutoComplete: keyup event
  alt Key is Enter or NumpadEnter
    AutoComplete->>AutoComplete: Check if skipEnter is true
    alt skipEnter is false
      AutoComplete->>menu: querySelector('.active')
      menu-->>AutoComplete: current item
      alt current item is not null
        AutoComplete->>current: click()
        current-->>AutoComplete: Event
        AutoComplete->>AutoComplete: close()
      end
      AutoComplete->>Invoke: EnterCallback()
      Invoke-->>AutoComplete: Task
    end
  else Key is Escape
    AutoComplete->>AutoComplete: Check if skipEsc is false
    alt skipEsc is false
      AutoComplete->>Invoke: EscCallback()
      Invoke-->>AutoComplete: Task
      AutoComplete->>AutoComplete: close()
    end
  else Key is ArrowUp or ArrowDown
    AutoComplete->>menu: querySelector('.active')
    menu-->>AutoComplete: current item
    AutoComplete->>AutoComplete: Handle arrow keys
  else Key is Backspace or Delete
    AutoComplete->>AutoComplete: Check if trigger delete is true
    alt trigger delete is true
      AutoComplete->>Invoke: TriggerDeleteCallback(input.value)
      Invoke-->>AutoComplete: Task
    end
  end

Loading

File-Level Changes

Change	Details	Files
Refactored JavaScript event handling for improved performance and reduced potential memory leaks.	Removed the input parameter from the debounce function in keyup event handler. Replaced keydown event listener with keyup to avoid issues with long-running OnValueChanged calls. Removed triggerBlur function and inlined its logic into close function. Removed change event listener. Removed TriggerDeleteCallback method call. Removed the _render field. Removed TriggerChange method. Removed TriggerDeleteCallback method. Removed the Input parameter from EnterCallback method.	src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs test/UnitTest/Components/AutoCompleteTest.cs src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs test/UnitTest/Components/InputTest.cs src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs src/BootstrapBlazor/Components/Search/Search.razor.cs
Enhanced component initialization and disposal to prevent errors when the component is disposed of during asynchronous operations.	Moved dispose logic into the AutoComplete.dispose callback to ensure proper cleanup. Added show and close methods to the ac object for better control over the dropdown's visibility.	src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js
Improved dropdown menu rendering and data filtering.	Modified TriggerFilter to only render the dropdown menu. Replaced ValueChanged event with OnCustomFilter event in the AutoComplete component. Replaced value attribute with @Bind attribute in AutoComplete.razor.	src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs src/BootstrapBlazor.Server/Components/Samples/AutoCompletes.razor.cs src/BootstrapBlazor.Server/Components/Samples/AutoCompletes.razor src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#5812	The AutoComplete component should not exhibit stuttering when typing, even with long-running functions attached to the OnValueChanged attribute.	✅
#5812	The text in the AutoComplete component should not be overwritten by older values while typing.	✅

Possibly linked issues

• bug(AutoComplete): studder on long running OnValueChanged function call #5812: The PR fixes the described issue by improving debounce and input filtering logic, resolving the stuttering and input overwriting problem.
• bug(AutoComplete): studder on long running OnValueChanged function call #5812: The PR fixes the issue by changing the event trigger from keydown to keyup and improves the AutoComplete component.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @celadaris - I've reviewed your changes - here's some feedback:

Overall Comments:

• The javascript changes are quite large - could you extract some of the logic into smaller functions to improve readability?
• The C# code now bypasses the CurrentValue setter - is this the right approach, or should the setter be modified instead?

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 2 issues found
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[celadaris]

Explanation for Failing Unit Tests

This PR fixes a stuttering issue that occurs when using OnValueChanged with potentially long-running (async) operations. The root cause was Blazor re-rendering the input element with a stale Value before the user's latest input was fully processed or before the async callback completed.

To fix this reliably, the following core changes were made:

1. The input element's value attribute is no longer directly bound in Blazor (value="@CurrentValueAsString" was removed). The visual input during typing is now controlled by the browser.
2. JavaScript (setValue) is used to synchronize the visual input value with the C# state only on specific events (initial load, item click, enter, escape, blur).
3. The update to the component's C# Value property (and invocation of OnValueChanged/ValueChanged) is now intentionally debounced and occurs primarily within the PerformFilteringAndCommitValue method (called from JS after the user stops typing) or upon explicit commit actions (blur, enter, click).

Impact on Tests:

This necessary change in the timing of the C# Value update causes the following tests to fail:

• Items_Ok & ValidateForm_Ok: These tests fail because they directly invoke older methods (TriggerDeleteCallback, TriggerChange) and expect the component's Value property to be updated immediately. In the fixed code, these methods no longer update the Value immediately; the update is correctly handled after the debounce period or by commit actions (like blur via TriggerBlurWithValue) to prevent the stuttering. The component's Value now accurately reflects the committed state, not the instantaneous typed state.

  • Recommendation: These tests need to be updated to reflect the component's new, correct behavior. They should likely call PerformFilteringAndCommitValue and await it (or add a suitable delay/wait condition) or simulate a blur/enter event before asserting the final Value.

• Item Count Tests (IgnoreCase_Ok, OnCustomFilter_Ok, OnCustomFilter_Test, IsLikeMatch_Test, DisplayCount_Ok): These tests assert the number of rendered dropdown items immediately after invoking the filtering logic. While the code now uses the targeted _dropdown.Render(), failures might still occur due to the timing specifics of the bUnit render cycle.

  • Recommendation: These tests might require minor adjustments, such as adding an await Task.Yield() or using bUnit's WaitForStateChangeAsync / WaitForAssertion after triggering the filter logic and before asserting the rendered item count, to ensure the DOM is fully updated.

This PR prioritizes fixing the user-facing stuttering bug. The failing tests highlight behavior that was intentionally changed, and adapting the tests is the appropriate next step.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (46b08a3) to head (3db66b6).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #5819   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          660       660           
  Lines        30136     30117   -19     
  Branches      4253      4252    -1     
=========================================
- Hits         30136     30117   -19     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[ArgoZhang]

@sourcery-ai review

[ArgoZhang]

@sourcery-ai review

[sourcery-ai]

Hey @celadaris - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider renaming the 'ac' object to something more descriptive to improve code readability.
• The removal of 'triggerBlur' and 'handlerKeydown' functions might affect the component's behavior; ensure these changes are intentional and tested.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

Hey @celadaris - I've reviewed your changes - here's some feedback:

Overall Comments:

• The javascript changes look good, but there are a lot of C# changes that just remove code - can you confirm that all of this code is truly no longer needed?
• The javascript changes introduce ac.show and ac.close methods, but these are only called internally - should these be exposed for external use?

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[ArgoZhang]

@celadaris use bind:onchange rewrite component