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>
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.
Source: stackoverflow.com
Related Query
- <input type="number"> scroll behaviour differ with React
- How to scroll to text input on focus when there is an input accessory with React Native
- Handle an input with React hooks
- React input defaultValue doesn't update with state
- Wrong React hooks behaviour with event listener
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- Deactivate input in react with a button click
- Lodash debounce with React Input
- Updating a React Input text field with the value on onBlur event
- Initializing React number input control with blank value?
- Clear form input field values after submitting in react js with ant-design
- React Virtualized Table - performance issues with input element in ~8 columns table
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How to create a controlled input with empty default in React 15
- How to create sticky headers on scroll with react
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- React Formik does not work with number input
- Adding in a scroll button with Ionic React
- React rebuild tree with HOC components (causing input field focus loss)
- How to reload input value in React / Javascript with Virtual DOM?
- Test input Search box with React testing library
- typescript react setState with user input
- React Native WebView scroll behaviour doesn't work as expected
- React - setting input value with JavaScript does not trigger 'onChange'
- Test text input with react and jest
- How to scroll to top on route change with react router dom v6?
- React table with static header on browser scroll
- Stateless React components with controlled input
- React scroll animation with setState is choppy
More Query from same tag
- React not rerendering after action
- How to keep showing the 'popover' on hovering on the anchorEl and 'popover' as well?
- React JS: How to send data from one Component to another Component onClick event
- Req.files to hold file objects in multiple arrays
- Reactjs - filter objects
- multiple api call actions in the redux thunk
- Jestjs how to test function being called inside another function
- Can't remove scrollbar from Material UI Dialog
- Converting JavaScript to work with React component
- Cannot destructure property `user` of 'undefined' or 'null'
- How can I pass data to Modal using react. Edit or Delete?
- Access and change the state array element in main React App from grandchild
- How to pass an array of dates to selectedDays in react-day-picker?
- How to manage noDataComponent or display no rows found in ReactTable V7
- Unexpected token - Webpack 2.2.0 and SCSS
- Reference External Modules in TypeScript
- Close the pop-up when clicking outside it
- React 404 Heroku Issue
- How to convert time zone id to to time zone name in js or moment.js
- Props not passing in dynamic URL - TypeError React.js
- multiple returns in a react function component isn't working
- How to pass variable to graphql from method when onClick with button and get it's return data back?
- Using Styled Components in functional React components
- Url is Changing but Requested Page is not Loading in React js
- How do I get create extra large Buttons in react-bootstrap not just `size="lg"`
- ReactJs, TypeScript TypeError: menuItems.map is not a function, error on map
- Do you need to save a file locally before sending it to a mongo db?
- clientWidth function in React
- How to keep content inside Footer and Header in React Component?
- Styling an objects property using React