Open sangeethnandakumar opened 5 years ago
I'm experiencing the same issue. It is caused by From errors function. It sets the form class to error and then adds the error messages to the div:
File: /public/libs/semantic/dist/components/form.js
741: errors: function(errors) {
742: module.debug('Adding form error messages', errors);
743: module.set.error();
744: $message
745: .html( settings.templates.error(errors) )
746: ;
747: }
There are rules in form.css
File: /public/libs/semantic/dist/components/form.css
241: /*--------------------
242: Types of Messages
243: ---------------------*/
244:
245: .ui.form .success.message,
246: .ui.form .warning.message,
247: .ui.form .error.message {
248: display: none;
249: }
and for error
File: /public/libs/semantic/dist/components/form.css
429: /* On Form */
430: .ui.form.error .error.message:not(:empty) {
431: display: block;
432: }
This wont work. When class is added, the div
list is empty and error messages will not be rendered cause css add error
class was called first. Fix is simple switch of add messages and set error class functions. Generated patch file:
--- public/libs/semantic/dist/semantic.js 2019-09-27 00:47:06.000000000 +0300
+++ public/libs/semantic/dist/semantic.js 2019-09-27 00:34:49.000000000 +0300
@@ -1238,10 +1238,10 @@
},
errors: function(errors) {
module.debug('Adding form error messages', errors);
- module.set.error();
$message
.html( settings.templates.error(errors) )
;
+ module.set.error();
}
},
"semantic": "semantic-ui#2.4.1"
This is/was an unclear browser implementation/bug, because from the CSS specification it does not matter if the class is added before changing the html content or afterwards. This bug is especially noticable in Safari.
Long story short: The :empty
selector is missing (although is does not seem necessary at first)
The community fork Fomantic UI fixed this by https://github.com/fomantic/Fomantic-UI/pull/558
This bug is sometimes visible and sometimes not and I don't know why