Disable scrolling increment/decrement for "number" type Text components

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.

1 Like

Thanks for the quick response here @justin.

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 :slight_smile: )

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 :slight_smile:

1 Like

Sounds good, thanks @justin!

1 Like