scroll behaviour differ with React

Question

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>

Dmitrii Babich · Accepted Answer

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.

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

Tags:

html

reactjs

Avery235

1 Answers

Dmitrii Babich

Recent Activity

Donate For Us