Forum Academy Marketplace Showcase Pricing Features

Decimal Input Fields Behavior Issue

Hi Bubblers,

I am working on a finance-related app and encountered an issue related to input fields.

This probably won’t be an app-breaking issue but it is affecting the UX a little bit.

Here is my setting of an input field, (decimal, limited to 2 digits).

To reproduce the issue:

  1. Input a value with 2 decimals
  2. Delete the value
  3. Input the value again right after you delete it.

See below as the Bubble.io input field’s behavior:
Screen+Recording+2021-06-01+at+01.42.32.81+PM

The Bubble.io input cursor will stop at the last decimal place of the input. No matter how many more digits you input, it will always only stop at the decimals. The user will have to click on the starting digit to input a new number.

See this for the Stripe’s input field’s behavior:
Screen+Recording+2021-06-01+at+01.43.55.86+PM

For Stripe’s input, the cursor will stop at the starting digit of that field instead of stay on the last decimal. The user can start input a new number directly.

Has anyone encountered this before and what are your tips to improve the UX here?

Inputs are appreciated.

Thank you in advance,
Evan

1 Like

Nice find. I haven’t experienced this before but it looks like you found a bug. I’d report it to the bubble team :smiley:

1 Like

For anyone that wants to know more about it, see below for the response after I submitted a bug report:

"Unfortunately while this is certainly something that could perform better in your scenario, it is behaving as expected. You’ll notice that after clearing the input, if you click into it, the cursor is automatically repositioned in front of the decimal point. And, if you select all and start typing, all the typing you do also ends up in front of the decimal point.

If you select the two decimal numbers and start typing, Bubble knows the decimal numbers are limited to two and only allows two numbers to be typed. So, when you clear the value and immediately start typing, it’s essentially handling the same way it would as if you had selected the decimals and started typing since that’s where the cursor is.

My best recommendation going forward would be to begin typing while the previous value is still selected instead of clearing and then typing. This will yield behavior more similar to what you’re looking for and allow you to type the integer, a decimal point and then the decimals without stopping.

That being said, you are definitely welcome to share the desired behavior on our Ideaboard which allows you to submit feature requests and also vote on ideas that other users have shared. Our product team also regularly monitors this and uses it to inform our roadmap.

Sorry to not have a better answer for you here… Don’t hesitate to reach out if we can assist with anything else."

I believe I have a similar issue. How did you resolve?

Hi @Nick_1 ,

Sorry, I wasn’t able to come up with a workaround. I think it will allow you to input the number from the first digit if you don’t specify exactly how many digits after the decimal point (leave it blank).

Please feel free to pin me if you find anything worth noting.