[FIX] mail: chatwindow search autocomplete with long name overflowing

When we search for a name in the chat window having a very long name
of the user will overflowing the screen. The autocomplete dropdown list is
overflowing and rendering out of the screen.

With this commit, we have resized the width of autocomplete dropdown list with
the width of the outer element's width as it's standard behavior.

Task : 2449115

closes odoo/odoo#66238

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

1 files changed, 7 insertions, 1 deletions

diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
index 8059cc3571a..c6e268e5cd6 100644
--- a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
+++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
@@ -29,7 +29,13 @@ class AutocompleteInput extends Component {
             args.classes = { 'ui-autocomplete': this.props.customClass };
         }
 
-        $(this.el).autocomplete(args);
+        const autoCompleteElem = $(this.el).autocomplete(args);
+        // Resize the autocomplete dropdown options to handle the long strings
+        // By setting the width of dropdown based on the width of the input element.
+        autoCompleteElem.data("ui-autocomplete")._resizeMenu = function () {
+            const ul = this.menu.element;
+            ul.outerWidth(this.element.outerWidth());
+        };
     }
 
     willUnmount() {