refactor(AutoComplete): update blur logic #5838
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Reviewer's Guide by SourceryThis pull request refactors the Sequence diagram for blur event handling in AutoCompletesequenceDiagram
participant User
participant AutoComplete.razor
participant AutoComplete.razor.js
participant PopoverCompleteBase.cs
User->AutoComplete.razor: Clicks outside AutoComplete
activate AutoComplete.razor
AutoComplete.razor->AutoComplete.razor.js: blur()
activate AutoComplete.razor.js
AutoComplete.razor.js->AutoComplete.razor.js: Check data-bb-blur attribute
alt data-bb-blur is true
AutoComplete.razor.js->PopoverCompleteBase.cs: invokeMethodAsync('TriggerBlur')
activate PopoverCompleteBase.cs
PopoverCompleteBase.cs->PopoverCompleteBase.cs: OnBlurAsync(Value)
PopoverCompleteBase.cs-->>AutoComplete.razor.js:
deactivate PopoverCompleteBase.cs
end
AutoComplete.razor.js-->>AutoComplete.razor:
deactivate AutoComplete.razor.js
deactivate AutoComplete.razor
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the AutoComplete component’s blur handling to support a new OnBlurAsync callback and centralizes blur event logic.
- Removed the @OnBlur attribute from the Razor markup
- Added a JSInvokable TriggerBlur method in the C# component base class
- Updated the JavaScript to include the input element and separate blur and keyup handlers
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs | Adds TriggerBlur method to allow JS to invoke the OnBlurAsync callback |
| src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js | Updates initialization to include the input element and refactors the blur/keyUp handlers |
| src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs | Calls OnBlurAsync in OnClickItem to trigger blur events programmatically |
| src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor | Removes the @OnBlur attribute in favor of JavaScript-based blur handling |
Comments suppressed due to low confidence (1)
src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs:134
- Potential double invocation of OnBlurAsync may occur when an item is clicked since the callback is invoked both in OnClickItem and via JavaScript's TriggerBlur; please confirm that this behavior is intentional or add checks to avoid duplicate execution.
if (OnBlurAsync != null)
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey @ArgoZhang - I've reviewed your changes - here's some feedback:
Overall Comments:
- Consider adding a debounce to the
TriggerBlurmethod to avoid excessive calls to theOnBlurAsynccallback. - It might be cleaner to pass the
idof the component to the blur function in javascript, rather than usingthis.
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
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the AutoComplete component to improve blur event handling and add an OnBlurAsync callback.
- Adds a JS-invokable TriggerBlur method in the C# component base class.
- Updates the JavaScript file to centralize blur handling and ensures the callback is invoked during keyup events and popover close events.
- Removes the direct @OnBlur binding from the Razor markup to rely solely on JavaScript for blur management.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs | Added TriggerBlur for JS-triggered blur callbacks. |
| src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js | Updated event listeners to call the new blur method. |
| src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs | Updated OnClickItem to invoke OnBlurAsync if defined. |
| src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor | Removed the @OnBlur attribute to centralize blur handling. |
Member
Author
|
@sourcery-ai review |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #5838 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 660 660
Lines 30105 30123 +18
Branches 4251 4255 +4
=========================================
+ Hits 30105 30123 +18 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Hey @ArgoZhang - I've reviewed your changes - here's some feedback:
Overall Comments:
- The javascript changes look good, but I'm concerned about the duplication of the OnBlurAsync call in OnClickItem and TriggerBlur.
- Consider debouncing the OnBlurAsync event to avoid excessive calls.
Here's what I looked at during the review
- 🟡 General issues: 1 issue found
- 🟢 Security: all looks good
- 🟡 Testing: 1 issue found
- 🟢 Complexity: all looks good
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
ArgoZhang
added a commit
that referenced
this pull request
Apr 17, 2025
* refactor: update blur event callback * refactor: 更新脚本 * test: 更新单元测试 * refactor: 增加 Blur 支持 * test: 增加单元测试
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #5837
Summary By Copilot
This pull request enhances the
AutoCompletecomponent in theBootstrapBlazorlibrary by adding support for a newOnBlurAsynccallback and improving the handling of blur events. Key changes include updates to the Razor, C#, and JavaScript files to implement this functionality.Enhancements to blur event handling:
Razor file update (
AutoComplete.razor): Removed the@onblurattribute from the Razor markup to centralize blur event handling through JavaScript and the newOnBlurAsynccallback.C# backend logic (
AutoComplete.razor.cs): Added a check in theOnClickItemmethod to invoke theOnBlurAsynccallback if it is defined, ensuring that blur events are triggered programmatically as needed.JavaScript enhancements (
AutoComplete.razor.js):initfunction to include the input element in theacobject for easier access.blurmethod in theacobject to handle blur events and invoke theTriggerBlurmethod on the C# side when thedata-bb-blurattribute is set totrue.keyuphandler with a more specific implementation to ensure proper handling of theTabkey and blur events.C# component base class (
PopoverCompleteBase.cs): Added aTriggerBlurmethod marked with[JSInvokable]to allow JavaScript to invoke theOnBlurAsynccallback when triggered.Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Refactor the AutoComplete component to improve blur event handling and add support for an OnBlurAsync callback
New Features:
Enhancements:
Chores: