no-wheel form-input bug (unable to preventDefault inside passive event listener)

[nick4414]

Describe the bug

If I have an b-form-input and add the property no-wheel to it and I try to scroll when the input is focussed, I get this error in the browser console:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
stopEvent @ app.js:52144
stopWheel @ app.js:15778

Example code to reproduce the issue is:

<b-form-input placeholder="XXX" type="number" v-model="XXX" no-wheel required/>

Versions

Libraries:

• BootstrapVue: 2.21
• Bootstrap: 4.5.0
• Vue: 2.6.12

Environment:

• Device: Laptop
• OS: Windows
• Browser: Chrome
• Version: 89

[monas]

Saw the same issue, but took a while to figure out what is casing this. Then just tried to edit live dox page and got this one

[nick4414]

@monas
Hey, thanks for your answer. So did you figure out what is causing this and how to solve the issue ?

[monas]

@nick4414 at the moment I just stopped using no-wheel at all. I have taken a quick look into the source (

bootstrap-vue/src/components/form-input/form-input.js

Line 145 in 1d59417

eventOff(document, 'wheel', this.stopWheel)

)

I am not an expert on using wheel event but it looks little bit strange that this event is caught on document. I would try to use that event on input field itself if that is possible. Now on mouse wheel blurs the input and I think it shouldn't. Unfortunately I am too busy to dig deeper ant test this out :( But I would start here.

[nick4414]

I found a workaround in #1872.
<b-form-input type="number" @mousewheel.native="$event.preventDefault()"/>

Unfortunately it still doesn't really solve the issue with "no-wheel", but works for now.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!