www: fix textarea focus on mobile Safari by replacing buggy autosizer

2 files changed, 21 insertions, 3 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 78dc71f4..ddcf7923 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -1,4 +1,21 @@
-var autosize = require('autosize');
+var autosize = function(t) {
+    var offset = !window.opera ? (t.offsetHeight - t.clientHeight)
+        : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width'))) ;
+
+    var resize  = function(t) {
+        t.style.height = 'auto';
+        t.style.height = (t.scrollHeight  + offset ) + 'px';
+    }
+
+    t.addEventListener && t.addEventListener('input', function(event) {
+        resize(t);
+    });
+
+    t['attachEvent']  && t.attachEvent('onkeyup', function() {
+        resize(t);
+    });
+}
+
 require('whatwg-fetch');
 require('element-closest');
 require('classlist.js');
@@ -531,7 +548,9 @@ function ready(fn) {
 }
 
 ready(function () {
-    autosize(document.querySelectorAll('textarea'));
+    document.querySelectorAll('textarea').forEach((ta) => {
+        autosize(ta);
+    });
 
     var insertButtons = function (e) {
         var textarea = e.target;
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 672db5c6..6bca014d 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -166,7 +166,6 @@ body > header p {
 }
 #newmessage textarea {
     border: 1px solid #CCC;
-    height: 14pt;
     margin: 0 0 5px 0;
     min-height: 14pt;
     padding: 4px;