feat(BFormInput): implement no-wheel prop to disable mousewheel events #2903

TudorGR · 2025-11-08T10:15:35Z

Implements the no-wheel prop for BFormInput component to disable the browser's default behavior of incrementing/decrementing numeric input values when scrolling the mousewheel over a focused input.

This addresses issue #2901 and provides feature parity with bootstrap-vue.

Changes:

Add noWheel prop to BFormInput component with default value false
Add wheel event handler that prevents default when noWheel is true
Update TypeScript types to include noWheel prop
Add documentation for the new prop in data file
Update user documentation with usage information
Remove NotYetImplemented notices from docs and migration guide

Closes #2901

Describe the PR

This PR implements the missing no-wheel prop for the BFormInput component, which was previously marked as "Not Yet Implemented" in the documentation.

When no-wheel is set to true, the component prevents the browser's default mousewheel behavior on numeric-like inputs (e.g., type="number"). This prevents accidental value changes when users scroll over a focused numeric input field.

The implementation is:

✅ Minimal and non-breaking - defaults to false, maintaining existing behavior
✅ Simple - just adds a wheel event listener that calls preventDefault() when enabled
✅ Well-documented - includes prop documentation and usage examples
✅ Fully tested - all 1643 existing tests pass

Small replication

Usage example:

<BFormInput type="number" no-wheel />

Before this PR: Scrolling the mousewheel over a focused numeric input would increment/decrement the value (browser default behavior).

After this PR: With no-wheel prop set, scrolling the mousewheel over a focused numeric input has no effect on the value.

PR checklist

What kind of change does this PR introduce? (check at least one)

The PR fulfills these requirements:

Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the 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 denied

Summary by CodeRabbit

Breaking Changes
- Removed the noWheel prop from form input components. Use Vue's native @wheel.prevent modifier instead to disable mousewheel increment/decrement behavior on numeric inputs.
Documentation
- Updated component documentation and migration guide with instructions for disabling mousewheel events using Vue's @wheel.prevent modifier, including code examples.

bolt-new-by-stackblitz · 2025-11-08T10:15:38Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-11-08T10:15:44Z

Walkthrough

The pull request removes the noWheel prop from BFormInputProps and updates documentation to explain using Vue's native @wheel.prevent modifier for disabling mousewheel events on numeric inputs instead of a custom prop implementation.

Changes

Cohort / File(s)	Summary
Documentation updates `apps/docs/src/docs/components/form-input.md`, `apps/docs/src/docs/migration-guide.md`	Replaced `<NotYetImplemented/>` placeholders with detailed explanations and code examples demonstrating `@wheel.prevent` to disable mousewheel behavior on numeric inputs.
Component API refactoring `packages/bootstrap-vue-next/src/types/ComponentProps.ts`	Removed the `noWheel` boolean prop from `BFormInputProps` interface, eliminating the custom prop in favor of Vue's native wheel modifier.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Breaking change note: The noWheel prop removal is a breaking API change; verify no active usage exists in the codebase or related examples.
Documentation changes are straightforward content replacements with clear explanations.

Suggested reviewers

VividLemon

Poem

🐰 Wheel events tamed with Vue's native hand,
No custom props needed, just @wheel.prevent planned,
Docs bloomed where placeholders stood,
Native modifiers now do good! 🌱

Pre-merge checks and finishing touches

❌ Failed checks (3 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	Title claims to 'implement no-wheel prop' but the actual changeset removed the noWheel prop and replaced it with Vue's native @wheel.prevent approach.	Update title to reflect actual changes, e.g., 'feat(BFormInput): document native Vue wheel event handling for disabling mousewheel' or similar.
Description check	⚠️ Warning	Description claims to implement a noWheel prop but the code changes show the prop was removed from ComponentProps.ts and documentation updated to use @wheel.prevent instead.	Clarify that the implementation uses Vue's native @wheel.prevent modifier rather than a custom prop, and update description to match actual code changes.
Out of Scope Changes check	⚠️ Warning	Documentation updates to form-input.md and migration-guide.md align with removing NotYetImplemented notices, but the removal of noWheel prop conflicts with PR description claiming implementation of this prop.	Reconcile the contradiction: either implement the noWheel prop as described, or update all descriptions to clarify the Vue-native approach is the chosen solution.
Linked Issues check	❓ Inconclusive	The PR addresses issue #2901's objective to provide mousewheel event disabling capability, but uses Vue's native @wheel.prevent approach instead of implementing a custom no-wheel prop.	Confirm whether the Vue-native approach (@wheel.prevent) fully satisfies issue #2901's requirement for feature parity with bootstrap-vue's no-wheel prop.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1bbaa3f and d97fba6.

📒 Files selected for processing (3)

apps/docs/src/docs/components/form-input.md (1 hunks)
apps/docs/src/docs/migration-guide.md (1 hunks)
packages/bootstrap-vue-next/src/types/ComponentProps.ts (0 hunks)

💤 Files with no reviewable changes (1)

packages/bootstrap-vue-next/src/types/ComponentProps.ts

✅ Files skipped from review due to trivial changes (1)

apps/docs/src/docs/migration-guide.md

🚧 Files skipped from review as they are similar to previous changes (1)

apps/docs/src/docs/components/form-input.md

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

VividLemon

I think this may be a feature that was only useful to bootstrap-vue. Upon reviewing this code, it appears that one could just as easily achieve the same output by just doing

<BFormInput @wheel.prevent /> and wouldn't need our intervention as a prop anyways. If that works, perhaps that prop would better be left unimplemented and mentioned in the migration guide

I do appreciate the effort. @TudorGR , if the code I suggested for BFormInput is correct, would we be better off just making this a note in the documentation? It is more natural "vue" code

…ents

TudorGR · 2025-11-11T08:15:29Z

I updated PR based on the feedback. Instead of implementing a custom no-wheel prop, this now documents the Vue-native approach using @wheel.prevent, which is simpler and more idiomatic. Example: <BFormInput type="number" @wheel.prevent />

VividLemon · 2025-11-14T16:34:50Z

Thanks

* upstream/main: (28 commits) fix(BToggle)! Remove redundant attribute cleanup & update docs for accessibility attributes on show/hide components (bootstrap-vue-next#2918) chore: release main (bootstrap-vue-next#2912) fix: allow custom component props in orchestrator create methods with type safety (bootstrap-vue-next#2922) fix(BModal): prevent focus trap error when no tabbable elements exist (bootstrap-vue-next#2864) Update package description for clarity (bootstrap-vue-next#2917) Update project description for clarity and detail test: add event emission tests for BTable and BTableLite (bootstrap-vue-next#2915) fix(BTableLite): Use primary key to persist row-details state when items change (bootstrap-vue-next#2871) chore: release main (bootstrap-vue-next#2896) feat(BTable): add configurable debouncing ci: Add publint to the build process (bootstrap-vue-next#2909) docs(Offcanvas): Parity pass (bootstrap-vue-next#2900) fix(directives): Robustness fixes for directives (bootstrap-vue-next#2906) docs(BFormInput): document @wheel.prevent for disabling mousewheel events (bootstrap-vue-next#2903) fix(typings): Fix paths to `*.d.mts` files (bootstrap-vue-next#2907) feat: add name and form props to BFormRating for form submission (bootstrap-vue-next#2895) docs: refactor docs to avoid duplication and boilerplate code (bootstrap-vue-next#2891) docs(BToast): Parity (bootstrap-vue-next#2887) docs(BModal): fix attribute to hide footer (bootstrap-vue-next#2888) docs(BPlaceholder): Parity pass (bootstrap-vue-next#2886) ...

VividLemon reviewed Nov 10, 2025

View reviewed changes

docs(BFormInput): document @wheel.prevent for disabling mousewheel ev…

d97fba6

…ents

TudorGR force-pushed the feat/add-no-wheel-prop-to-bforminput branch from 1bbaa3f to d97fba6 Compare November 11, 2025 08:14

VividLemon approved these changes Nov 14, 2025

View reviewed changes

VividLemon merged commit 84b5805 into bootstrap-vue-next:main Nov 14, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(BFormInput): implement no-wheel prop to disable mousewheel events #2903

feat(BFormInput): implement no-wheel prop to disable mousewheel events #2903

Uh oh!

TudorGR commented Nov 8, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Nov 8, 2025

Uh oh!

coderabbitai bot commented Nov 8, 2025 •

edited

Loading

Uh oh!

VividLemon left a comment •

edited

Loading

Uh oh!

TudorGR commented Nov 11, 2025

Uh oh!

VividLemon commented Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

feat(BFormInput): implement no-wheel prop to disable mousewheel events #2903

feat(BFormInput): implement no-wheel prop to disable mousewheel events #2903

Uh oh!

Conversation

TudorGR commented Nov 8, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe the PR

Small replication

PR checklist

Summary by CodeRabbit

Uh oh!

bolt-new-by-stackblitz bot commented Nov 8, 2025

Uh oh!

coderabbitai bot commented Nov 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

VividLemon left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TudorGR commented Nov 11, 2025

Uh oh!

VividLemon commented Nov 14, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

TudorGR commented Nov 8, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 8, 2025 •

edited

Loading

VividLemon left a comment •

edited

Loading