netteForms.js v3.3 and <dialog> instead of alert()

David Grudl
Nette Core | 7510

netteForms.js since v3.3.0 solves a rather annoying bug of some Chromium-based browsers, that after calling alert() the focus does not return to the tab.

That is, when the generic This field is required warning window pops up, when clicked, focus is not returned to the non-valid field. Or rather, it does, but because the entire tab loses focus, it's not visible. So the user doesn't know which element the message refers to. There can also be a problem if you use specific error messages (which is desirable), like Please enter name, but there are more name fields in the form.

For example, the error occurs in Opera/Windows, but not in Chrome/Windows or Edge. It also occurs in Chrome/Android or Brave.

All my attempts to return the focus back to the window after calling alert() failed, so instead of the alert, the affected browsers (Opera/Windows and mobile Chromium) display <dialog>. This element, which is only supported in Chromium for now, has a showModal() method that renders the content in the middle of the page above all elements and renders the surrounding content inactive. Which is the future native HTML solution for modal windows.

Unfortunately, it turns out that some mobile browsers have trouble displaying the modal <dialog> as expected. I would need cooperation here. I haven't been able to find any documentation or analysis, so if you encounter a problematic browser, post what browser it is (+ a console.log(navigator.userAgentData) output) and see what CSS would help. The dialog has a class netteFormsModal and try using this CSS as a base:

.netteFormsModal {
	margin: auto;
	border: 1px solid black;
	padding: 1rem;