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.
Hey @soroushjp_vow! Thanks for the detailed post. You’re right, this is super annoying, and I don’t see a simple way to avoid this in Retool. I’ll file this with the team and see if we can add a setting to disable this.
In the meanwhile - one (weird) way around this is to set the text input type as text, enable validation, and set a validation type of integer or float. Kind of a backwards way of doing it, but might help for the short term.
The problem with the validation type in the Text component is that it’s “toothless” – all it does it put a green tick / red exclamation mark next to the field. It doesn’t prevent invalid form submission or disable invalid key input. So it’s relatively unintuitive and unhelpful for the user. For now, I’d prefer to have the scrolling behaviour than switch to the validation type I think. I’ll wait for the team to hopefully tackle the scrolling issue.
Sorry for the delay here @soroushjp_vow (Retool team has been enjoying a few days off )
Yep, you're definitely right, the currently validation features closer resemble type checking and not actual forced validation (although this is available via JS for most input components). Bug is filed and we'll keep you updated on progress here
Just wanted to follow up on this post with some good news — scrolling is now disabled on the number-type text input component and form validation is fully functional, thank you so much for your feedback!
@Victoria@Justin has the fix where scrolling was disabled for number inputs been removed? We are running into this in our applications and its generating some problems.
Hey @r0meboards! I can't seem to reproduce this issue on my end. Would you mind creating a new post with some screenshots so we can try debugging with you?
)
.
(h/t 