[FIX] mail: select first contact in new message box

In previous versions of Odoo, in the New message box, typing a few
letters of the name of your recipient and pressing Enter would
automatically select the conversation with this contact.

Since 14.0, one has to select the first result with the Down key.
This commit restores the previous behavior by using the
[`autofocus`](https://api.jqueryui.com/autocomplete/#option-autoFocus)
option.

closes odoo/odoo#61967

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

addons/mail/static/src/components/autocomplete_input/autocomplete_input.js

@@ -11,6 +11,7 @@ class AutocompleteInput extends Component {
         }
 
         let args = {
+            autoFocus: true,
             select: (ev, ui) => this._onAutocompleteSelect(ev, ui),
             source: (req, res) => this._onAutocompleteSource(req, res),
             focus: ev => this._onAutocompleteFocus(ev),

addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js

@@ -380,6 +380,48 @@ QUnit.test('open chat from "new message" chat window should open chat in place o
     );
 });
 
+QUnit.test('new message autocomplete should automatically select first result', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ id: 131, name: "Partner 131" });
+    this.data['res.users'].records.push({ partner_id: 131 });
+    const imSearchDef = makeDeferred();
+    await this.start({
+        async mockRPC(route, args) {
+            const res = await this._super(...arguments);
+            if (args.method === 'im_search') {
+                imSearchDef.resolve();
+            }
+            return res;
+        },
+    });
+
+    // open "new message" chat window
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+
+    // search for a user in "new message" autocomplete
+    document.execCommand('insertText', false, "131");
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keydown'));
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keyup'));
+    // Wait for search RPC to be resolved. The following await lines are
+    // necessary because autocomplete is an external lib therefore it is not
+    // possible to use `afterNextRender`.
+    await imSearchDef;
+    await nextAnimationFrame();
+    assert.hasClass(
+        document.querySelector('.ui-autocomplete .ui-menu-item a'),
+        'ui-state-active',
+        "first autocomplete result should be automatically selected",
+    );
+});
+
 QUnit.test('chat window: basic rendering', async function (assert) {
     assert.expect(11);