Elastic: Fix text selection in recipient inputs (#7129)

2 files changed, 9 insertions, 4 deletions

diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index ee82c3e15..3b3892518 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -957,7 +957,6 @@ html.ms .propform {
     .name {
         .overflow-ellipsis;
         flex-grow: 1;
-        display: inline-block;
         line-height: 1.1;
         padding: floor(.25 * @page-font-size);
         vertical-align: middle;
@@ -990,6 +989,10 @@ html.ms .propform {
 
     li {
         max-width: 100%;
+
+        &:not(.recipient) {
+            user-select: text;
+        }
     }
 
     input {
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index d4553c181..da780a190 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -3112,9 +3112,9 @@ function rcube_elastic_ui()
      */
     function recipient_input(obj)
     {
-        var list, input,
+        var list, input, selection = '',
             input_len_update = function() {
-                input.css('width', Math.max(40, input.val().length * 15 + 25));
+                input.css('width', Math.max(5, input.val().length * 15 + 10));
             },
             apply_func = function() {
                 // update the original input
@@ -3207,7 +3207,9 @@ function rcube_elastic_ui()
 
         list = $('<ul>').addClass('form-control recipient-input ac-input rounded-left')
             .append($('<li>').append(input))
-            .on('click', function() { input.focus(); });
+            // "selection" hack to allow text selection in the recipient box or multiple boxes (#7129)
+            .on('mouseup', function () { selection = window.getSelection().toString(); })
+            .on('click', function() { if (!selection.length) input.focus(); });
 
         // Hide the original input/textarea
         // Note: we do not remove the original element, and we do not use