Printable Version of Topic

Posted by: wrybread Jul 9 2020, 02:47 AM

I'm having a strange problem when submitting forms on Android using Chrome. Here's a stripped down version of it:

http://sinkingsensation.com/dropbox/form_test.php

If I edit one of the fields at the top of the page, like "Name2", then leave the cursor in the text field and scroll down and click "update", the click on "update" doesn't register, it simply hides my keyboard, and I have to click "update" a second time for it to work.

This is causing a lot of issues with a web app I'm working on.

Does anyone have any idea how to fix this?

Posted by: pandy Jul 9 2020, 04:04 AM

Doesn't happen to me. The form submits. Lets see if I can figure out what I'm using... Chrome 83.0.4103.106 (god help me!) on Android 8.1.0 .

Posted by: wrybread Jul 9 2020, 05:49 AM

Interesting. I'm using exact same Chrome, on Android 10. If it matters I'm on a Samsung S9+.

I just made it so the webpage print's the user's useragent by the way at the bottom.

Posted by: pandy Jul 9 2020, 08:20 AM

I tried again and focused most of the fields, one at the time. Submitted.

I don't think the phone should matter, but mobile isn't my forte. I think it's a pain to be honest, can't muster any interest for it. Was enough to keep track of browser discrepancies.

Posted by: Christian J Jul 9 2020, 09:59 AM

Maybe unrelated, but you should use a Doctype.

Also, the LABEL element's FOR attribute should correspond with the ID attribute of form fields, not NAME.

Posted by: wrybread Jul 9 2020, 10:54 AM

Thanks. I added a Doctype and removed the label tags, still getting the issue.

Posted by: Christian J Jul 9 2020, 11:31 AM

Is the same thing happening on other form pages? If so maybe it's an intentional browser feature (to avoid accidentall web page events when all the user wants to do is close the keyboard).

That said I'm not seeing it in my own Vivaldi/Android browser.

Posted by: wrybread Jul 9 2020, 11:37 AM

Yes it happens on any page where the text field is outside the Viewport.

I don't think it's intentional, since it causes buggy behavior (user having to submit twice). And the issue doesn't happen if the focused text field is inside the Viewport.

Posted by: Christian J Jul 9 2020, 01:19 PM

Missed that detail before, but now that I tested again it still worked in Vivaldi (according to its UA string it uses Chrome/83.0.4103.109).

Try testing in other chromium-based browsers on your phone (such as Vivaldi) in order to rule out any custom keyboard- or Samsung software.

Posted by: wrybread Jul 9 2020, 01:53 PM

Aha! Christian, you rock! Looks like it's an issue with Gboard. I switched to the Samsung keyboard and no longer have the issue.

Something tells me this isn't fixable, but if anyone has any idea how to fix this issue with Gboard, I'd love to hear it.

I think it's sending a resize even to the page when the keyboard closes.

Posted by: Christian J Jul 9 2020, 02:38 PM

So that the resizing pushes the submit button away from the user's finger, before the web page has had time to register the submit button tap? If that's correct maybe you could file a bug report for the keyboard app --it might work better if web pages receive the tap event before the resizing takes place.

Another idea might be to force the keyboard to close if the user scrolls the web page, but is that even possible with javascript? Maybe the blur() method has that effect?

Or maybe it's enough with a larger submit button, so at least part of it remains under the user's fingertip.