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,69 +39,82 @@
         option,
         fragment;
 
-      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 (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 (this.state.title) {
+          select.setAttribute('title', this.state.title);
+        }
 
-      if (this.state.title) {
-        select.setAttribute('title', this.state.title);
-      }
+        if (this.state.required) {
+          select.required = true;
+        } else {
+          select.required = false;
+        }
 
-      if (this.state.required) {
-        select.required = true;
-      } else {
-        select.required = false;
-      }
+        if (this.state.editable) {
+          select.readonly = true;
+        } else {
+          select.readonly = false;
+        }
 
-      if (this.state.editable) {
-        select.readonly = true;
-      } else {
-        select.readonly = false;
-      }
+        if (modification_dict.hasOwnProperty('value') ||
+            modification_dict.hasOwnProperty('item_list')) {
+          fragment = document.createDocumentFragment();
+
+          for (i = 0; i < item_list.length; i += 1) {
+            option = document.createElement('option');
+            option.textContent = item_list[i][0];
+            if (item_list[i][1] === null) {
+              option.setAttribute('disabled', 'disabled');
+            } else {
+              option.setAttribute('value', item_list[i][1]);
+              if (item_list[i][1] === this.state.value) {
+                option.setAttribute('selected', 'selected');
+                found = true;
+              }
+            }
+            fragment.appendChild(option);
+          }
 
-      if (this.state.hidden) {
-        select.hidden = true;
-      } else {
-        select.hidden = false;
-      }
+          if (!found && !isEmpty(this.state.value)) {
+            option = document.createElement('option');
+            option.textContent = '??? (' + this.state.value + ')';
+            option.setAttribute('value', this.state.value);
+            option.setAttribute('selected', 'selected');
+            fragment.appendChild(option);
+          }
 
-      if (modification_dict.hasOwnProperty('value') ||
-          modification_dict.hasOwnProperty('item_list')) {
-        fragment = document.createDocumentFragment();
-
-        for (i = 0; i < item_list.length; i += 1) {
-          option = document.createElement('option');
-          option.textContent = item_list[i][0];
-          if (item_list[i][1] === null) {
-            option.setAttribute('disabled', 'disabled');
-          } else {
-            option.setAttribute('value', item_list[i][1]);
-            if (item_list[i][1] === this.state.value) {
-              option.setAttribute('selected', 'selected');
-              found = true;
-            }
+          while (select.firstChild) {
+            select.removeChild(select.firstChild);
           }
-          fragment.appendChild(option);
+          select.appendChild(fragment);
         }
+      }
 
-        if (!found && !isEmpty(this.state.value)) {
-          option = document.createElement('option');
-          option.textContent = '??? (' + this.state.value + ')';
-          option.setAttribute('value', this.state.value);
-          option.setAttribute('selected', 'selected');
-          fragment.appendChild(option);
+      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;
         }
 
-        while (select.firstChild) {
-          select.removeChild(select.firstChild);
+        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");
         }
-        select.appendChild(fragment);
       }
     })
 
@@ -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,49 +10,71 @@
     })
 
     .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")) {
-        textarea.value = modification_dict.value;
-      }
-
-      if (modification_dict.hasOwnProperty("name")) {
-        textarea.setAttribute('name', modification_dict.name);
-        textarea.setAttribute('id', modification_dict.name);
-      }
-
-      if (modification_dict.hasOwnProperty("title")) {
-        textarea.setAttribute('title', modification_dict.title);
-      }
-
-      if (this.state.required) {
-        textarea.setAttribute('required', 'required');
-      } else {
-        textarea.removeAttribute('required');
-      }
+      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;
+        }
+
+        if (modification_dict.hasOwnProperty("name")) {
+          textarea.setAttribute('name', modification_dict.name);
+          textarea.setAttribute('id', modification_dict.name);
+        }
+
+        if (modification_dict.hasOwnProperty("title")) {
+          textarea.setAttribute('title', modification_dict.title);
+        }
+
+        if (this.state.required) {
+          textarea.required = true;
+        } else {
+          textarea.required = false;
+        }
+
+        if (this.state.editable) {
+          textarea.removeAttribute('readonly');
+        } else {
+          textarea.setAttribute('readonly', 'readonly');
+        }
 
-      if (this.state.editable) {
-        textarea.removeAttribute('readonly');
-      } else {
-        textarea.setAttribute('readonly', 'readonly');
       }
 
-      if (this.state.hidden) {
-        textarea.hidden = true;
-      } else {
-        textarea.hidden = false;
+      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");
+        }
       }
 
     })
@@ -90,18 +104,35 @@
             return result;
           });
       }
+      if (this.state.error_text) {
+        return this.notifyInvalid(this.state.error_text)
+          .push(function () {
+            return result;
+          });
+      }
       return result;
     })
 
-    .declareAcquiredMethod("notifyChange", "notifyChange")
-    .onEvent('change', checkChange, false, true)
-    .onEvent('input', checkChange, false, true)
+    .declareJob('deferErrorText', function deferErrorText(error_text) {
+      return this.changeState({
+        error_text: error_text
+      });
+    }, {mutex: 'changestate'})
 
-    .declareAcquiredMethod("notifyInvalid", "notifyInvalid")
-    .onEvent('invalid', function invalid(evt) {
-      // invalid event does not bubble
-      return this.notifyInvalid(evt.target.validationMessage);
-    }, true, false)
+    .declareAcquiredMethod("notifyChange", "notifyChange")
+    .onEvent('change', function change() {
+      return RSVP.all([
+        this.checkValidity(),
+        this.notifyChange("change")
+      ]);
+    }, false, 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>