netteForms.js on Android does not correctly focus required inputs
valekj opened this issue · comments
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.
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
@valekj what returns console.log(navigator.userAgentData)
and console.log(!!HTMLDialogElement.prototype.showModal)
in affected browsers?
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.
Can you test that this netteForms.js works properly on Android?
https://github.com/nette/forms/tree/master/src/assets
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?
In the meantime, please add the style to your CSS file and we will tweak the resulting style over time.
thank you!