netteForms.js v3.3 a <dialog> místo alert()

netteForms.js od verze v3.3.0 řeší poměrně nepříjemný bug některých prohlížečů založených na Chromiu, a to že po volání alert() se nevrátí focus do okna.

Tedy když vyskočí okénko s generickým upozorněním This field is required, po odkliknutí se focus nepředá do nevalidního políčka. Respektive předá, ale protože celá záložka ztratí focus, není to vidět. Takže uživatel neví, kterého prvku se hláška týká. Problém může být i v případě, že používáte specifické chybové hlášky (což je žádoucí), jak třeba Zadejte prosím jméno, ale políček se jménem je ve formuláři víc.

Chyba se projevuje například v Opeře/Windows, ale nikoliv v Chrome/Windows či Edge. Měla by se projevovat také v Chrome/Android nebo Brave.

Všechny pokusy vrátit po volání alert() focus zpátky do okna selhaly, proto se místo alertu v postižených prohlížečích (Opera/Windows a mobilní Chromium) zobrazuje <dialog>. Tento element, který má zatím podporu pouze v Chromiu, má metodu showModal(), která obsah vykreslí uprostřed stránky nad všemi prvky a okolní obsah zneaktivní. Což je budoucí nativní HTML řešení pro modální okna.

Bohužel se ukazuje, že některé mobilní prohlížeče mají problém modální <dialog> zobrazit podle očekávání. Tady bych potřeboval spolupráci. Žádnou dokumentaci nebo analýzu se mi nepodařilo najít, takže když na problematické zobrazení narazíte, napište, o jaký prohlížeč jde (+ výpis console.log(navigator.userAgentData)) a zkuste, jaké CSS by pomohlo. Dialog má třídu netteFormsModal a jako základ zkuste použít toto CSS:

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

---

https://github.com/…s/issues/275