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

David Grudl
Nette Core | 7777
+
+5
-

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

joe
Člen | 313
+
+3
-

Ahoj, čekal bych, že přidané styly by měly dialogu stačit.

Jinak bych navrhoval držet se nějakého hezkého pojmenování tříd, osobně používám syntaxi
[<namespace>-]<ComponentName>[-descendentName][--modifierName], kterou využívá SUIT CSS.

Název třídy by pak mohl být nette-Dialog, trochu mi přišlo, že název tříd u Tracy (kde teď něco se styly řeším) tomu odpovídá.

Ještě si u této validace říkám, jestli je někdo, kdo výchozí alerty na projektu nechává a jestli by nebylo hezčí mít validaci přívětivější už v základu i za cenu, že ji bude muset každý jen přestylovat.