<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">In Chrome, using <code class="notranslate">event.preventDefault()</code> and/or <code class="notranslate">event.nativeEvent.preventDefault()</code> within <code class="notranslate">onWheel</code> handler of an <code class="notranslate">input[type=number]</code> does not prevent number scrolling.</p>
<p dir="auto"><a href="https://www.chromestatus.com/features/6662647093133312" rel="nofollow"><img src="https://user-images.githubusercontent.com/175330/54867920-3613dc00-4d7e-11e9-889c-7d89f444a662.png" alt="image" style="max-width: 100%;"></a><br>
<a href="https://www.chromestatus.com/features/6662647093133312" rel="nofollow">https://www.chromestatus.com/features/6662647093133312</a></p>
<p dir="auto">React example: <a href="https://codesandbox.io/s/00kx423nyl" rel="nofollow">https://codesandbox.io/s/00kx423nyl</a><br>
HTML &amp; JS example for comparison: <a href="https://jsbin.com/warerunitu/edit?html,js,output" rel="nofollow">https://jsbin.com/warerunitu/edit?html,js,output</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I would expect the same behaviour as shown in the HTML &amp; JS example above.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Tested in <code class="notranslate">react@16.8.5</code>, <code class="notranslate">react-dom@16.8.5</code> and Chrome v73. I'm unsure if previous versions are affected.</p>
<p dir="auto">Similar to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="206457623" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/8968" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/8968/hovercard" href="https://github.com/facebook/react/issues/8968">#8968</a>, but for the <code class="notranslate">wheel</code> and <code class="notranslate">mousewheel</code> events. They are now passive by default for root elements in Chrome 73 (currently beta) which means React apps that have custom scrolling/zooming behaviors will run into issues.</p>
<p dir="auto">The quick fix may be to manually add event listeners with <code class="notranslate">{passive: false}</code> but has the React team considered if this should be configurable for the React event handler?</p>
<p dir="auto">Blog post from the Chrome team here: <a href="https://developers.google.com/web/updates/2019/02/scrolling-intervention" rel="nofollow">https://developers.google.com/web/updates/2019/02/scrolling-intervention</a></p>