[erp5_web_renderjs_ui] Textarea: use a fixed size on focus

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -323,7 +323,14 @@ select:-moz-focusring {
   text-shadow: 0 0 0 #000;
 }
 textarea {
+  word-wrap: break-word;
+  white-space: normal;
   vertical-align: top;
+  transition: height 0.2s ease-out;
+  height: 4em;
+}
+textarea:focus {
+  height: 20em;
 }
 ::-webkit-input-placeholder {
   color: #575757;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -259,7 +259,7 @@ vdf</string> </value>
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>955.12311.36129.49083</string> </value>
+                <value> <string>955.17985.54265.23893</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -277,7 +277,7 @@ vdf</string> </value>
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1478793295.77</float>
+                        <float>1479134904.68</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.js

@@ -17,7 +17,6 @@
   rJS(window)
     .setState({
       editable: false,
-      focused: false,
       value: ''
     })
 
@@ -37,7 +36,6 @@
       textarea.value = this.state.value;
       textarea.setAttribute('name', this.state.name);
       textarea.setAttribute('title', this.state.title);
-      textarea.setAttribute('wrap', 'off');
 
       if (this.state.required) {
         textarea.setAttribute('required', 'required');
@@ -50,12 +48,6 @@
       } else {
         textarea.setAttribute('readonly', 'readonly');
       }
-
-      if (this.state.focused) {
-        textarea.setAttribute('rows', Math.max(this.state.value.split('\n').length, 2));
-      } else {
-        textarea.setAttribute('rows', 2);
-      }
     })
 
     .declareMethod('getContent', function () {
@@ -90,13 +82,6 @@
       return this.notifyInvalid(evt.target.validationMessage);
     }, true, true)
 
-    .onEvent('focus', function () {
-      return this.changeState({focused: true, value: this.element.querySelector('textarea').value});
-    }, true, false)
-    .onEvent('blur', function () {
-      return this.changeState({focused: false, value: this.element.querySelector('textarea').value});
-    }, true, false)
-
     .declareAcquiredMethod("notifySubmit", "notifySubmit")
     .onEvent('keydown', function (evt) {
       if (evt.keyCode === 83 && (navigator.platform.match("Mac") ? evt.metaKey : evt.ctrlKey)) {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_html5_textarea_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>954.45675.44850.53452</string> </value>
+                <value> <string>955.18001.28212.40413</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1478794055.21</float>
+                        <float>1479134598.21</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -405,10 +405,17 @@ select {
 }
 
 textarea {
+  word-wrap: break-word;
+  white-space: normal;
   // Fix inconsistent Textarea bottom margin in Firefox and Chrome
   // http://stackoverflow.com/a/26904480
   vertical-align: top;
-  // BUG: how to transition on textarea row property
+
+  transition: height @transition-timing;
+  height: 4em;
+  &:focus {
+    height: 20em;
+  }
 }
 
 ::-webkit-input-placeholder {