Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Closed
nick4414 opened this issue Mar 29, 2021 · 6 comments
Closed

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

nick4414 opened this issue Mar 29, 2021 · 6 comments
Labels
Status: Stale Status: Workaround Available

Comments

@nick4414
Copy link

nick4414 commented Mar 29, 2021 •
edited
Loading

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
@nick4414 nick4414 changed the title no-wheel FormInputBug (unable to preventDefault inside passive event listener) no-wheel form-input bug (unable to preventDefault inside passive event listener) Mar 29, 2021
@monas
Copy link

monas commented Apr 1, 2021

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
image

@nick4414
Copy link
Author

nick4414 commented Apr 1, 2021 •
edited
Loading

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

@monas
Copy link

monas commented Apr 3, 2021 •
edited
Loading

@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)
)
image
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
Copy link
Author

nick4414 commented Apr 4, 2021

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
Copy link

stale bot commented Jul 21, 2021

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 stale bot added the Status: Stale label Jul 21, 2021
@stale
Copy link

stale bot commented Sep 6, 2021

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!

@stale stale bot closed this as completed Sep 6, 2021
@HarmvZ HarmvZ mentioned this issue Feb 14, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Stale Status: Workaround Available
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jacobmllr95 @monas @nick4414