score:0

bracket syntax is not valid html. they're used in jsx to insert javascript code inside html syntax, but obviously that will not work in pure html.

the equivalent html would be:

<!doctype html>
<html>
  <body>
    <input
      type="number"
      min="0"
      max="99999"
      step="1"
    />
  </body>
</html>

working example

note that in both cases (react and html), the input needs to have focus for scrolling to work. this ability to scroll might also be a browser-dependent behavior.

also, note that if you inspect the html that's being output by your react example, you'll see the same html that i've written above, so this is definitely not a behavior specific to react.

score:0

<!doctype html>
<html>
   <body>
    <input
      type="number"
      min=0
      max=99999
      step=1
    />
   </body>
</html>

i am not sure where you tried the .html but it seem to have the same behaviour on scroll. check the codepen link.

https://codepen.io/nandukalidindi/pen/wxpgwr

however when i tried to render the .html on my local chrome browser, the scroll was not working and same with the react. neither of them responded to scroll on local browser. i am not sure how the environments differ.

score:1

looks like the scrolling behavior depends on whether there is an onwheel handler or not. when rendering two inputs on a page there is a difference:

<input id="input1" type="number" min="0" max="99999" step="1">
<input id="input2" type="number" min="0" max="99999" step="1" onwheel="">

here input2 increments/decrements its value on mouse wheel, but input1 doesn't.

since react attaches its own event handlers to dom elements, inputs are enabling this increment on mouse wheel feature and behave differently comparing to a plain html page.


Related Query

More Query from same tag