-
-
Notifications
You must be signed in to change notification settings - Fork 157
fix(useFormInput) fix debounce behavior on blur #2721
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
WalkthroughA local debounce utility was introduced and integrated into the form input composable, replacing the previous third-party debounce import. The form input logic was updated to support immediate and debounced model value updates, with enhanced control for synchronous updates and cancellation on blur events. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FormInputComposable
participant DebounceUtility
User->>FormInputComposable: Input value
FormInputComposable->>DebounceUtility: Debounce updateModelValue (if not immediate)
DebounceUtility-->>FormInputComposable: Debounced model update
User->>FormInputComposable: Blur event
FormInputComposable->>DebounceUtility: Cancel pending debounce
FormInputComposable->>FormInputComposable: Synchronously update model value
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/bootstrap-vue-next/src/composables/useFormInput.ts
(4 hunks)packages/bootstrap-vue-next/src/utils/debounce.ts
(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/bootstrap-vue-next/src/composables/useFormInput.ts (1)
packages/bootstrap-vue-next/src/types/CommonTypes.ts (1)
Numberish
(3-3)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (10)
packages/bootstrap-vue-next/src/utils/debounce.ts (4)
1-10
: LGTM! Proper type imports and organization.The imports are well-organized and properly typed using VueUse core types. This approach allows reusing established type definitions while implementing custom logic.
11-11
: LGTM! Simple and effective no-op implementation.The
noop
function is correctly implemented and will be useful for cleanup scenarios.
16-30
: LGTM! Proper promise wrapper with cancellation support.The
createFilterWrapper
function correctly wraps the filter to provide a promise-based interface while preserving the cancel method. The implementation properly handles thethis
context and argument passing.
103-109
: LGTM! Well-documented export with proper typing.The
useDebounceFn
function is properly typed and documented. The default values and return type correctly extend the base VueUse types with cancellation support.packages/bootstrap-vue-next/src/composables/useFormInput.ts (6)
14-14
: LGTM! Import cleanup maintains compatibility.Good practice to keep the VueUse imports that are still needed while removing only
useDebounceFn
.
17-17
: LGTM! Proper integration of local debounce utility.The import correctly references the newly implemented local debounce utility.
31-31
: LGTM! Improved number handling with nanToZero option.Adding
{nanToZero: true}
ensures consistent behavior when dealing with invalid debounce values, preventing NaN from causing issues in timer logic.
50-57
: LGTM! Well-implemented immediate update control.The
updateModelValue
function enhancement properly supports both immediate and debounced updates. The logic clearly separates the two paths and maintains backward compatibility.
124-128
: Excellent fix for the debounce blur issue!This is the core fix that addresses the PR objective. The implementation correctly:
- Cancels any pending debounced updates before comparing and updating the model value
- Forces an immediate update on blur using the new
immediate
parameter- Maintains the existing force update logic
This ensures that blur events immediately update the model value, preventing the inconsistency described in the PR where transformations (like uppercase conversion) would be partially applied and then reverted.
111-117
:✅ Verification successful
Verify the early return condition logic.
The early return condition has been expanded to include
debounceNumber.value <= 0
. This seems logical since no debouncing would be needed when the debounce value is zero or negative.
🏁 Script executed:
#!/bin/bash # Description: Verify the interaction between lazy modifiers and debounce values # to ensure the early return logic is correct # Search for any existing tests or documentation about the combination of these conditions rg -A 10 -B 5 "lazy.*debounce|debounce.*lazy" --type ts --type vue # Look for any existing blur event test cases rg -A 15 -B 5 "onBlur|blur.*event" --type ts --type vueLength of output: 182
🏁 Script executed:
#!/bin/bash # Correct RG invocation to include .ts and .vue files via globs # Search for any existing tests or documentation about lazy + debounce interactions rg -g '*.ts' -g '*.vue' -A 10 -B 5 "lazy.*debounce|debounce.*lazy" # Search for any existing blur event test cases rg -g '*.ts' -g '*.vue' -A 15 -B 5 "onBlur|blur.*event"Length of output: 21658
OnBlur early-return logic is correct
The added
debounceNumber.value <= 0
check aligns with the common-props documentation—debounce only applies when set to a positive value and is ignored otherwise. Combined with the existinglazy
,lazyFormatter
, andtrim
flags, this condition ensures that on-blur formatting or flush behavior only runs when needed. No changes required.
Describe the PR
Hi,
currently, the debouncing function only works partially. It takes into account the delay provided to update (at regular intervals) the model value of the field being edited, but it doesn't update the model immediately when the @blur event is generated.
If we use a high debouncing value (for example 2 seconds), the following problem is easily reproducible:
let's imagine a field that transforms characters to uppercase at the end of input (via the @blur event, when exiting the field).
If the (partial or complete) user input took less than 2 seconds at the time of exiting the field, only part of the field will be capitalized, and after (maximum) 2 seconds, the field's content will be updated/completed again and returned to lowercase (because the debouncing function completes its action after the field has already lost focus).
Overall, a field v-model value should be up to date when you leave a field being edited to make the following scenarios reliable:
The debounce feature is the last feature I really miss in bootstrap-vue-next (compared to bootstrap-vue). Until now, I was using a locally patched version of bootstrap-vue-next to implement it, and after a while, I thought it was time to share my patch upstream. ^^
Note that unfortunately, the
useDebounceFn
function in@vueuse/core
does not currently support thecancel
feature. However, its implementation was discussed in this pending pull request, no changes have been made since then in@vueuse/core
. In the meantime, I had to duplicate theuseDebounceFn
function in the newsrc/utils/debounce.ts
file, adding the missingcancel
support.Small replication
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)
feat(...)
fix(...)
docs(...)
The PR fulfills these requirements:
CHANGELOG
is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be deniedSummary by CodeRabbit
New Features
Bug Fixes