Internal issue 2899 - Numeric text field input modified by scroll

[ticket-sync[bot]]

Some feedback from our users is that they didn't expect scrolling to increment/decrement their input when their mouse is hovering over a focused Text field with a 'numeric' type. When the users are quickly trying to fill out a form it often leads to their inputted value getting modified when they didn't want it to be. 

 

You can replicate the behaviour on the example numeric text field: [Text field - Intelligence Community Design System (sis.gov.uk)|https://design.sis.gov.uk/components/text-field/code#with-min-and-max-values]

 

If this is intended behaviour then I feel the default window scrolling should be prevented while the scrolling is controlling the input. With the current behaviour both the window scrolls and the input increments/decrements, typically only by 1 unit as the mouse immediately moves off the field as the window scrolls.

 

It would also be nice if there was an easy prop to optionally disable this type of input too as I can see it being a source of frustration when trying to efficiently fill out a scroll-able form.

[MI6-255]

Specifically happens with a mouse with a scroll wheel

[MI6-255]

For this issue, just remove this behaviour, don't introduce a prop

[ad9242]

adding onWheel={(e) => e.preventDefault()} to the element prevents the number from increasing, but also stops the page from scrolling when mouse is over the input field, so needs further investigation