Catalog: Integer field deletes itself after 11th digit

[williamito]

Describe the bug
While typing into "ID number" which is an integer field, once you type the 11th number the field auto-deletes all the contents.

Component
SDC gallery app

To Reproduce
Steps to reproduce the behavior:

1. Select "Text field" in catalog app
2. Select "ID number" field
3. Enter an 11 digit number

Expected behavior
Field does not delete itself.

Screenshots

integer.mp4

Smartphone (please complete the following information):

• Device: Pixel 4

Additional context
Different than #1594 - the auto-delete behavior is new, in 1594 the text just scrolls so it's not visible.

[FikriMilano]

This needs to be fixed first, in order to fix #1594

[FikriMilano]

The reason this happens is because integer type has an upper limit of 2,147,483,647.
Inputting 2,147,483,647 will work.
But inputting 2,147,483,648 won't work.

Note: without coma

https://build.fhir.org/datatypes.html#integer

[FikriMilano]

@shelaghm what's your preferred behavior for this case?
Show error when limit is exceeded and/or show the max integer value instead or something else.

[FikriMilano]

I will be on exam leave for some weeks, will continue the work after I come back.
@f-odhiambo @jingtang10

[shelaghm]

@FikriMilano My suggestion is to show an error message such as Maximum 11 numbers and adjust the error message based on the maximum # allowed. This let's people know how to fix the issue.

I'm not sure what the best term to use is and if number is the right one to use in this context, but I'm assuming integer and digit are less familiar terms for frontline health workers? If anyone has thoughts on this, please add a comment.

I also recommend using EntryFormat to display 11 digits so people know when they are completing the form how many numbers to enter.

[williamito]

@shelaghm The actual issue isn't the number of digits but the value; any number larger than 2,147,483,647 will break things, so a 10 digit number like 2,147,483,648 can also fail. It was a coincidence that the test case 1,234,567,890 is smaller than the magic number.

I'm not sure what a good error message would be though, "value must be smaller than 2,147,483,648" is a little awkward.

[shelaghm]

@williamito @FikriMilano Ohhh, got it. Thanks for clarifying. In that case I think we should explain it as number must be smaller than 2,147,483,648 so that it is more clear what the constraints are.

[FikriMilano]

Thanks! @shelaghm @williamito
Resuming on this

[FikriMilano]

Hi @shelaghm, here's a demo of the solution.
Please check if this behavior is to your liking, just to make sure that we are on the same page.

Demo.Integer.Limit.webm

[shelaghm]

@FikriMilano Looks great, one small change is to use a comma , instead of a period . for the number 2,147,483,647. Thanks!

[jingtang10]

@FikriMilano Looks great, one small change is to use a comma , instead of a period . for the number 2,147,483,647. Thanks!

@shelaghm - commar or period is a localization issue - we need to use the correct system api to format the number in the correct locale.

for example, 2,147,483,647 makes sense to me, but I don't think it makes sense in mainland Europe, I think they do 2.147.483.647.

[shelaghm]

@jingtang10 @FikriMilano
Good point. Did not realize this is a localization issue. Next steps sound good to me 👍

[PallaviGanorkar]

@FikriMilano Are you working on this?