netteForms.js on Android does not correctly focus required inputs

[valekj]

Version: 3.1

Bug Description

If you forget to fill a required input on Android, said input is not correctly focused afterwards (no css is applied) and you can't see what you are typing.
Happens on Android 10 and 11 (Chrome), works correctly on iOS and desktop.
If you comment out netteForms.js and keep browser validation, it works as expected even on Android.

Steps To Reproduce

Open a form that uses netteForms.js (for example https://nette.org/cs/sign-in).
Don't fill any input and submit the form.
Javascript warning pops up informing you about missing inputs.
Click ok.
Start typing.

Expected Behavior

Required input should be focused, css should be applied and when you start typing, you should see the letters.

[dg]

This is a Chrome issue that also affects Windows. The reason is that alert() loses focus.

Maybe it is related to https://developers.google.com/web/updates/2017/03/dialogs-policy

[dg]

@valekj what returns console.log(navigator.userAgentData) and console.log(!!HTMLDialogElement.prototype.showModal) in affected browsers?

[valekj]

Hi, sorry for the delay.

Here are the console logs from android phone (s10e, android 11, chrome 92.0.4515.159):

console.log(navigator.userAgentData):
returns an object, however when I try to convert it to JSON, I just get an empty object, so here is a screenshot:

console.log(!!HTMLDialogElement.prototype.showModal):
returns "true"

Chrome (92.0.4515.159) on Windows 10 does not seem to be affected on my end.

[dg]

Can you test that this netteForms.js works properly on Android?
https://github.com/nette/forms/tree/master/src/assets

[valekj]

It focuses the input correctly now, however the dialog looks a bit weird:

Also, would it be possible to target mobile Brave as well? Unfortunately it does not have any identification in Brands property.

[dg]

I can target all mobile Chromium browsers.

Unfortunately I don't have Android and I don't know how to fix the design. Can you give it a try?

[valekj]

It's nothing fancy, but what about this:

style.innerText = '.netteFormsModal { text-align: center; margin: auto; width: 80%; border: 1px solid #000; padding: 1rem; } .netteFormsModal button { padding: .1em 2em }';