netteForms.js on Android does not correctly focus required inputs

[valekj]

netteForms.js on Android does not correctly focus required inputs

[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 }';

[dg]

In the meantime, please add the style to your CSS file and we will tweak the resulting style over time.

[valekj]

thank you!