CODEWITHSUNDEEP
htmlreactjs
Avery235
Avery235

Reputation: 5316

<input type="number"> scroll behaviour differ with React

import React from 'react';
import { render } from 'react-dom';

const App = () => (
  <input
    type="number"
    min={0}
    max={99999}
    step={1}
  />
);

render(<App />, document.getElementById('root'));

Edit rr0qj41omq

If i focus the input box and enter a number, I'm able to change the number by using the mouse scroll wheel while hovered over the input box.

However, when I create a .html file with the following content, I'm not able to change the number via scrolling. Any idea what's the reason?

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

Upvotes: 3

Views: 3844

Answers (4)

Muhammad Rosyid
Muhammad Rosyid

Reputation: 196

you can use attribute onWheel like this to prevent increasing or decreasing value when mouse scrolling:

onWheel={(e) => e.currentTarget.blur()}

Upvotes: 1

Dmitrii Babich
Dmitrii Babich

Reputation: 499

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.

Upvotes: 1

Thomas Hennes
Thomas Hennes

Reputation: 9979

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.

Upvotes: 0

Nandu Kalidindi
Nandu Kalidindi

Reputation: 6280

<!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.

Upvotes: 0

Related Questions