[FIX] mail: focus should be on composer after post message

PURPOSE

When sending a message by clicking on the "send" button manually, the focus
should stay on the text input (and the mobile keyboard should stay open), so
that it is possible to quickly send another message afterward without having to
re-click manually on the text input

SPECIFICATION

the focus should be set to composer automatically after sending a message

LINKS

closes odoo/odoo#61226

Taskid: 2372546
Pr: https://github.com/odoo/odoo/pull/61226
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

2 files changed, 29 insertions, 1 deletions

diff --git a/addons/mail/static/src/components/composer/composer.js b/addons/mail/static/src/components/composer/composer.js
index 4434697f8fb..991d5fc4482 100644
--- a/addons/mail/static/src/components/composer/composer.js
+++ b/addons/mail/static/src/components/composer/composer.js
@@ -261,6 +261,7 @@ class Composer extends Component {
      */
     _onClickSend() {
         this._postMessage();
+        this.focus();
     }
 
     /**
diff --git a/addons/mail/static/src/components/thread_view/thread_view_tests.js b/addons/mail/static/src/components/thread_view/thread_view_tests.js
index 2c81214c024..8e95fd80d4c 100644
--- a/addons/mail/static/src/components/thread_view/thread_view_tests.js
+++ b/addons/mail/static/src/components/thread_view/thread_view_tests.js
@@ -1697,10 +1697,11 @@ QUnit.test('first unseen message should be directly preceded by the new message
     document.querySelector('.o_ComposerTextInput_textarea').focus();
     await afterNextRender(() => document.execCommand('insertText', false, "/who"));
     await afterNextRender(() => {
-        document.querySelector('.o_Composer_buttonSend').focus();
         document.querySelector('.o_Composer_buttonSend').click();
     });
 
+    // composer is focused by default, we remove that focus
+    document.querySelector('.o_ComposerTextInput_textarea').blur();
     // simulate receiving a message
     await afterNextRender(() => this.env.services.rpc({
         route: '/mail/chat_post',
@@ -1732,6 +1733,32 @@ QUnit.test('first unseen message should be directly preceded by the new message
     );
 });
 
+QUnit.test('composer should be focused automatically after clicking on the send button [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({id: 20,});
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "Dummy Message"));
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.hasClass(
+        document.querySelector('.o_Composer'),
+        'o-focused',
+        "composer should be focused automatically after clicking on the send button"
+    );
+});
+
 });
 });
 });