I have a data entry issue which is quite problematic and would like to solve for our users:
For all of the “number” type Text components (rendered as an HTML input[type=number]), if the user tries to scroll away while their pointer is on the text field, the number is incremented and decremented. This causes the user to accidentally change this number, sometimes without realising it, causing quite serious data entry errors in our app.
It is possible disable the visual up/down arrows using CSS, but it seems that it’s not possible to disable the scroll behaviour (the important culprit to tackle) without access to JS events.
The only solution I can see to solving this is to move to a Text field type “text”, but this allows non-numeric inputs. This could in theory be combined with the “Keycodes to ignore” option, to disable all non-numeric keycodes, but this is of course quite hacky and non-obvious for app maintainers. There is regexp validation but this only provides the green arrow validation, rather than actually helping the user more proactively. The ideal setup would allow me to disable the input[type=number] scrolling itself.
Is there another solution I’m not seeing here, or could this be added as a change to Retool?
I’d like to know before I try my much hackier keycode suppression solution, which I believe is my next best option.