Elastic: Fix context menu (paste) on the recipient input (#7431)

2 files changed, 8 insertions, 11 deletions

diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index e8bebcf89..50bcb4ee2 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -939,7 +939,7 @@ html.ms .propform {
     .recipient {
         display: flex;
         position: relative;
-        max-width: 50%;
+        max-width: ~"calc(50% - 3px)";
         border: 1px solid @color-recipient-input-border;
         background-color: @color-recipient-input-background;
         border-radius: .25em;
@@ -994,11 +994,15 @@ html.ms .propform {
         &:not(.recipient) {
             user-select: text;
         }
+
+        &.input {
+            flex: 1;
+            min-width: 100px;
+        }
     }
 
     input {
-        width: 40px;
-        max-width: 100%;
+        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 6d24884ae..4dfce00b3 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -3119,9 +3119,6 @@ function rcube_elastic_ui()
     function recipient_input(obj)
     {
         var list, input, selection = '',
-            input_len_update = function() {
-                input.css('width', Math.max(5, input.val().length * 15 + 10));
-            },
             apply_func = function() {
                 // update the original input
                 $(obj).val(list.text() + input.val());
@@ -3167,7 +3164,6 @@ function rcube_elastic_ui()
 
                 input.val(result.text);
                 apply_func();
-                input_len_update();
 
                 return result.recipients.length > 0;
             },
@@ -3209,20 +3205,17 @@ function rcube_elastic_ui()
                         return false;
                     }
                 }
-
-                input_len_update();
             };
 
         // Create the input element and "editable" area
         input = $('<input>').attr({type: 'text', tabindex: $(obj).attr('tabindex')})
             .on('paste change', parse_func)
-            .on('input', input_len_update) // only to fix input length after paste
             .on('keydown', keydown_func)
             .on('blur', function() { list.removeClass('focus'); })
             .on('focus mousedown', function() { list.addClass('focus'); });
 
         list = $('<ul>').addClass('form-control recipient-input ac-input rounded-left')
-            .append($('<li>').append(input))
+            .append($('<li class="input">').append(input))
             // "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(); });