erp5_web_renderjs_ui: html5 textarea/select follow the html5 input latest changes

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_select_js.js

@@ -39,16 +39,17 @@
         option,
         fragment;
 
+      if (modification_dict.hasOwnProperty('value') ||
+          modification_dict.hasOwnProperty('item_list') ||
+          modification_dict.hasOwnProperty('editable') ||
+          modification_dict.hasOwnProperty('required') ||
+          modification_dict.hasOwnProperty('id') ||
+          modification_dict.hasOwnProperty('name') ||
+          modification_dict.hasOwnProperty('title')
+          ) {
         select.id = this.state.id || this.state.name;
         select.setAttribute('name', this.state.name);
 
-      if (modification_dict.error_text &&
-          !select.classList.contains("is-invalid")) {
-        select.classList.add("is-invalid");
-      } else if (select.classList.contains("is-invalid")) {
-        select.classList.remove("is-invalid");
-      }
-
         if (this.state.title) {
           select.setAttribute('title', this.state.title);
         }
@@ -65,12 +66,6 @@
           select.readonly = false;
         }
 
-      if (this.state.hidden) {
-        select.hidden = true;
-      } else {
-        select.hidden = false;
-      }
-
         if (modification_dict.hasOwnProperty('value') ||
             modification_dict.hasOwnProperty('item_list')) {
           fragment = document.createDocumentFragment();
@@ -103,6 +98,24 @@
           }
           select.appendChild(fragment);
         }
+      }
+
+      if (modification_dict.hasOwnProperty('error_text') ||
+          modification_dict.hasOwnProperty('hidden')) {
+        if (this.state.hidden && !this.state.error_text) {
+          select.hidden = true;
+        } else {
+          select.hidden = false;
+        }
+
+        if (this.state.error_text &&
+            !select.classList.contains("is-invalid")) {
+          select.classList.add("is-invalid");
+        } else if (!this.state.error_text &&
+                   select.classList.contains("is-invalid")) {
+          select.classList.remove("is-invalid");
+        }
+      }
     })
 
     .declareMethod('getContent', function getContent() {
@@ -122,32 +135,45 @@
         }
       }
       return result;
-    })
+    }, {mutex: 'changestate'})
 
     .declareAcquiredMethod("notifyValid", "notifyValid")
     .declareMethod('checkValidity', function checkValidity() {
       var select = this.element.querySelector('select'),
-        result = select.checkValidity() || this.state.error_text === "";
+        result = select.checkValidity();
       if (result) {
         return this.notifyValid()
           .push(function () {
             return result;
           });
       }
+      if (this.state.error_text) {
+        return this.notifyInvalid(this.state.error_text)
+          .push(function () {
+            return result;
+          });
+      }
       return result;
+    }, {mutex: 'changestate'})
+
+    .declareJob('deferErrorText', function deferErrorText(error_text) {
+      return this.changeState({
+        error_text: error_text
+      });
     })
 
     .declareAcquiredMethod("notifyChange", "notifyChange")
     .onEvent('change', function change() {
       return RSVP.all([
         this.checkValidity(),
-        this.notifyChange()
+        this.notifyChange("change")
       ]);
     }, false, false)
+
     .onEvent('input', function input() {
       return RSVP.all([
         this.checkValidity(),
-        this.notifyChange()
+        this.notifyChange("input")
       ]);
     }, false, false)
 
@@ -164,7 +190,10 @@
     .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
     .onEvent('invalid', function invalid(evt) {
       // invalid event does not bubble
-      return this.notifyInvalid(evt.target.validationMessage);
+      return RSVP.all([
+        this.deferErrorText(evt.target.validationMessage),
+        this.notifyInvalid(evt.target.validationMessage)
+      ]);
     }, true, false);
 
 }(document, window, rJS, RSVP, getFirstNonEmpty, isEmpty));
\ No newline at end of file

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_select_js.xml

@@ -234,7 +234,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>986.42836.14245.5444</string> </value>
+                      <value> <string>990.28313.43301.324</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1600275334.01</float>
+                              <float>1614700512.05</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js

@@ -3,14 +3,6 @@
 (function (window, rJS, RSVP, navigator) {
   "use strict";
 
-  function checkChange() {
-    var gadget = this;
-    return RSVP.all([
-      gadget.checkValidity(),
-      gadget.notifyChange()
-    ]);
-  }
-
   rJS(window)
     .setState({
       editable: false,
@@ -18,19 +10,28 @@
     })
 
     .declareMethod('render', function render(options) {
-      return this.changeState(options);
+      return this.changeState({
+        value: options.value,
+        editable: options.editable,
+        required: options.required,
+        id: options.id,
+        name: options.name,
+        title: options.title,
+        error_text: options.error_text || "",
+        hidden: options.hidden
+      });
     })
 
     .onStateChange(function onStateChange(modification_dict) {
       var textarea = this.element.querySelector('textarea');
 
-      if (this.state.error_text &&
-          !textarea.classList.contains("is-invalid")) {
-        textarea.classList.add("is-invalid");
-      } else if (!this.state.error_text &&
-                 textarea.classList.contains("is-invalid")) {
-        textarea.classList.remove("is-invalid");
-      }
+      if (modification_dict.hasOwnProperty('value') ||
+          modification_dict.hasOwnProperty('editable') ||
+          modification_dict.hasOwnProperty('required') ||
+          modification_dict.hasOwnProperty('id') ||
+          modification_dict.hasOwnProperty('name') ||
+          modification_dict.hasOwnProperty('title')
+          ) {
 
         if (modification_dict.hasOwnProperty("value")) {
           textarea.value = modification_dict.value;
@@ -46,9 +47,9 @@
         }
 
         if (this.state.required) {
-        textarea.setAttribute('required', 'required');
+          textarea.required = true;
         } else {
-        textarea.removeAttribute('required');
+          textarea.required = false;
         }
 
         if (this.state.editable) {
@@ -57,12 +58,25 @@
           textarea.setAttribute('readonly', 'readonly');
         }
 
-      if (this.state.hidden) {
+      }
+
+      if (modification_dict.hasOwnProperty('error_text') ||
+          modification_dict.hasOwnProperty('hidden')) {
+        if (this.state.hidden && !this.state.error_text) {
           textarea.hidden = true;
         } else {
           textarea.hidden = false;
         }
 
+        if (this.state.error_text &&
+            !textarea.classList.contains("is-invalid")) {
+          textarea.classList.add("is-invalid");
+        } else if (!this.state.error_text &&
+                   textarea.classList.contains("is-invalid")) {
+          textarea.classList.remove("is-invalid");
+        }
+      }
+
     })
 
     .declareMethod('getContent', function getContent() {
@@ -90,18 +104,35 @@
             return result;
           });
       }
+      if (this.state.error_text) {
+        return this.notifyInvalid(this.state.error_text)
+          .push(function () {
+            return result;
+          });
+      }
       return result;
     })
 
+    .declareJob('deferErrorText', function deferErrorText(error_text) {
+      return this.changeState({
+        error_text: error_text
+      });
+    }, {mutex: 'changestate'})
+
     .declareAcquiredMethod("notifyChange", "notifyChange")
-    .onEvent('change', checkChange, false, true)
-    .onEvent('input', checkChange, false, true)
+    .onEvent('change', function change() {
+      return RSVP.all([
+        this.checkValidity(),
+        this.notifyChange("change")
+      ]);
+    }, false, false)
 
-    .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
-    .onEvent('invalid', function invalid(evt) {
-      // invalid event does not bubble
-      return this.notifyInvalid(evt.target.validationMessage);
-    }, true, false)
+    .onEvent('input', function input() {
+      return RSVP.all([
+        this.checkValidity(),
+        this.notifyChange("input")
+      ]);
+    }, false, false)
 
     .declareAcquiredMethod("notifyFocus", "notifyFocus")
     .onEvent('focus', function focus() {
@@ -113,6 +144,16 @@
       return this.notifyBlur();
     }, true, false)
 
+    .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
+    .onEvent('invalid', function invalid(evt) {
+      // invalid event does not bubble
+      return RSVP.all([
+        this.deferErrorText(evt.target.validationMessage),
+        this.notifyInvalid(evt.target.validationMessage)
+      ]);
+    }, true, false)
+
+
     .declareAcquiredMethod("notifySubmit", "notifySubmit")
     .onEvent('keydown', function keydown(evt) {
       var textarea = this.element.querySelector('textarea');

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml

@@ -226,7 +226,7 @@
                   </item>
                   <item>
                       <key> <string>actor</string> </key>
-                      <value> <string>ERP5TypeTestCase</string> </value>
+                      <value> <string>zope</string> </value>
                   </item>
                   <item>
                       <key> <string>comment</string> </key>
@@ -240,7 +240,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>987.741.47228.29815</string> </value>
+                      <value> <string>990.28225.23941.23466</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -258,7 +258,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1601596591.47</float>
+                              <float>1614695136.35</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_page_templates_zuite/testFormDialogWorkflowWithMultipleValidationError.zpt

@@ -335,7 +335,7 @@
 </tr>
 <tr>
   <td>assertElementPresent</td>
-  <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_label_field.html"][5]/div/span[contains(text(), "Input is required but no input given.")]</td>
+  <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_label_field.html"][5]/div/span[contains(text(), "The input failed the external validator.")]</td>
   <td></td>
 </tr>
 <tr>
@@ -350,7 +350,7 @@
 </tr>
 <tr>
   <td>assertElementNotPresent</td>
-  <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_label_field.html"][5]/div/span[contains(text(), "Input is required but no input given.")]</td>
+  <td>//div[@data-gadget-url="${renderjs_url}/gadget_erp5_label_field.html"][5]/div/span[contains(text(), "The input failed the external validator.")]</td>
   <td></td>
 </tr>
 <tr>