netteForms.js v3.3 and <dialog> instead of alert()
- David Grudl
- Nette Core | 8218
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;
}