From 0816e141256496b6bfe43eece64367ca4b61f002 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <alec@alec.pl>
Date: Sun, 14 Oct 2018 12:59:31 +0200
Subject: [PATCH] Elastic: Workaround for recipient input and autocompletion on
 mobile

---
 skins/elastic/styles/widgets/forms.less |  7 ++++++-
 skins/elastic/ui.js                     | 11 +++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 3c456c930..a906944fb 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -980,8 +980,13 @@ html.touch .popupmenu.form {
         }
     }
 
+    li {
+        max-width: 100%;
+    }
+
     input {
-        width: 15px;
+        width: 40px;
+        max-width: 100%;
         background: transparent !important;
         border: 0 !important;
         margin-top: @recipient-input-margin-fix;
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index ad05e79ab..c38bd4341 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -2901,7 +2901,7 @@ function rcube_elastic_ui()
     {
         var list, input, ac_props, update_lock,
             input_len_update = function() {
-                input.css('width', input.val().length * 10 + 15);
+                input.css('width', Math.max(40, input.val().length * 15 + 25));
             },
             apply_func = function() {
                 // update the original input
@@ -2967,6 +2967,13 @@ function rcube_elastic_ui()
                 return result.recipients.length > 0;
             },
             parse_func = function(e) {
+                // FIXME: This is a workaround for a bug where on a touch device
+                // selecting a recipient from autocomplete list do not work because
+                // of some events race condition (?)
+                if (this.value.indexOf('@') < 0) {
+                    return;
+                }
+
                 if (e.type == 'blur') {
                     list.removeClass('focus');
                 }
@@ -3002,7 +3009,7 @@ function rcube_elastic_ui()
             .append($('<li>').append(input))
             .on('click', function() { input.focus(); });
 
-        // "Replace" the original input/textarea with the content-editable div
+        // Hide the original input/textarea
         // Note: we do not remove the original element, and we do not use
         // display: none, because we want to handle onfocus event
         // Note: tabindex:-1 to make Shift+TAB working on these widgets