Strange behaviour for integer fields on mobile devices

Support
1

1. What is the issue? Please be detailed.

I am using web-forms based on this commit

I had a user report that integer fields couldn't be filled out on a mobile device (Android 13, chrome 138.0.7204.169). Interestingly, the 'stepper' buttons to increase and decrease the value do work.

I then tried to reproduce the issue myself, and entering numbers works fine, but I encountered a different issue, where I am unable to delete digits already typed into an integer field (Android 16, brave 1.80.115). Again, the stepper seems to work fine:

I tested on desktop Firefox & it works fine, via web-forms preview and Central 2025.2.0).
I'm not sure if this is PrimeVue related on mobile devices, or web-forms specific.

2. What steps can we take to reproduce this issue?

This is the form we are using, to replicate the issue:

project_form_306.xlsx (13.5 KB)

I also tested this on ODK Central 2025.2.1 on mobile, via the 'New' submission --> web forms, and get the same behaviour.

3. What have you tried to fix the issue?

Nothing yet! I was wondering if others encounter the same!

4. Upload any forms or screenshots you can share publicly below.

Included above in section 1.

Thanks for your help!

2

Hi @spwoodcock!

Thank you for providing the sample form!

I tested it on Android 15 using Chrome v138, Firefox v140, and Brave v1.80.126 with two different host apps: Central and a blank Vue project. I couldn’t reproduce either of the two issues you mentioned.

Could you try creating a blank Vue project with @getodk/web-forms to isolate Web Forms from potential host app side effects?

Web Forms in Central webapp:

Web Forms in a blank Vue webapp:

In the meantime, I'll find another device to test.

1 Like
3

Thanks for the quick reply!

I can probably set up a blank Vue app if needed, but I'll also have to host it somewhere to make it accessible on mobile (or could cloudflare tunnel I guess).

But I can confirm this occurs on vanilla web forms, unrelated to our app wrapper in the first video.
I reproduced the issue on my device using:

Having the same issue in both environments suggests it's a device / browser issue somehow?

But you are right to be suspicious, as it would also have to be an incompatibility with my colleagues device too!
(funny that we get different issues though :sweat_smile:)

Let me know if the two tests mentioned aren't enough & if you would like me to reproduce in the Vue dev environment too :+1:

1 Like
4

Web form preview: https://getodk.org/web-forms-preview/app/index.html#/form?url=https://staging.xlsform.getodk.org/downloads/289f54ea241144fe85adfb5b44e2bd77guu5wmeu/project_form_306.xml (I believe these links expire eventually? But it might work for bit).

I can access the form using the provided link on Android 15 with both Chrome and Brave, and it works fine on our end. My teammate also tested it on Android 14 and iPhone, and it functioned correctly.

I'm wondering if you have an ad blocker or other browser plugins installed. Are you using the default Android keyboard? I'm trying to consider other environmental factors that might be affecting the issue.

5

Very strange!

I am using HeliBoard, but I just tested with the standard Android keyboard too, having the same issue.

No ad blockers installed. Just vanilla Brave browser.

I also tested on OperaGX, plus incognito tabs (avoid caching) - the same!

Normally I would dismiss these type of issues as being specific to my device, as I use GrapheneOS (based on AOSP upstream).

But because I had a colleague in the field report an issue with the same field type first, I think there may be something there!

Anyway, I'll try and get more info from my colleague - especially if it happens to anyone else - and get back to you :folded_hands:

1 Like
6

Thanks so much, @spwoodcock! We really appreciate you helping testing it and sharing the details. We’re diving deeper on our end to try and reproduce the issue. I'll post back as soon as I find something. Any additional info you can gather from your colleague (or others) will be super helpful!

7

Me and @dbemke spend some time testing this and:
We tried reproduce it on devices: Redmi 9t Android 10, pixel 7a android 16, nexus 5x android 8.1, personal Samsung Android 13, Pixel 3a Android 12, Samsung Galaxy M23 Android 14 and Iphone 12 Pro on iOS 18.5 using Submissions or Public Link on Google Chrome, Firefox, Safari and Brave and we couldn't. We also tried Desktop view and it works well.

Two things that we noticed is that "|" cursor behaves different if you provide number from keyboard or if you use sliders and it might be not intuitive. Sometimes it appear at the beginning of the field, sometimes at the end, sometimes even in the middle.
Second thing on Redmi 9t Android 10 - We uploaded the form to Central, created a public link and copied it to the device. On Chrome the page was in a permanent loading state.

1 Like
8

That's some pretty extensive testing! Thank you @Szymon_Rujner!

Just checking, were you testing on the latest web-forms code, or a build based on commit b672955?

Either way, I don't think many big (or related) changes have happened since that commit, so it probably makes no difference.

I think with such a wide range of tests, we can probably assume the issue is on our end then.

We add a tiny bit of code on top to wrap web forms in a stepper based layout (similar to Collect).

The only extra info I was able to gather from the field is below.

Devices affected:

  • Samsung SM-A750GN
  • Vivo 1807 Build
  • INFINIX Infinix X6821

Browser used:

  • Chrome 138.0.7204.168

Thanks both for your time spent on this! I don't want to take up any more of it, so I'll mark this as solved for now.

I'm still really baffled by what could be causing this though, as behaviour seems to vary a lot between devices :sweat_smile:

9

Actually, disregard what I just wrote! :laughing:

I managed to get the user to test on Web Forms Preview, so it's unrelated to our code wrapper:

They reported the same behaviour on the original device (Android 13, chrome 138.0.7204.169):

I don't want to lose the goodwill of the user by pestering them too much :smile: But if there is anything else (that isn't too technical / debugging) I could ask them, then please let me know :folded_hands:

10

@spwoodcock On latest: b0ae2c0 and 6b3e6c0

2 Likes
11

@spwoodcock thanks for testing and sending that video.

I noticed the flask icon in both videos from the user. Could Developer Mode be enabled, or are any experimental features active? Could the device be managed through MDM? I'm also wondering if any system configuration could be influencing this. Just exploring all possible causes :thinking:

flask icon
flask icon1418×750 117 KB

12

Good observation!

I would think it highly unlikely for developer options being enabled on their device, but perhaps they have MDM.

I will check with them & get back to you :grinning_face_with_smiling_eyes: