[FIX] mail: arrow up/down should change selection inside composer

Before this commit, when composer had some text content in
multi-line, arrow up/down was not jumping to previous/next
line.

This happens because the navigable list is active even when not
shown, and was preventing all keydown events.

This commit fixes the issue by limiting handling of keydown
events of navigable list to when it is shown.

Also fixes a bug where the quick edit of last message was triggered
when composer text was non-empty with ArrowUp. This should only
be triggered when the composer text input is empty.

closes odoo/odoo#120657

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

addons/mail/static/src/composer/composer.js

@@ -325,10 +325,7 @@ export class Composer extends Component {
     onKeydown(ev) {
         switch (ev.key) {
             case "ArrowUp":
-                if (this.hasSuggestions) {
-                    return;
-                }
-                if (this.props.messageEdition) {
+                if (this.props.messageEdition && this.props.composer.textInputContent === "") {
                     const messageToEdit = this.props.composer.thread.lastEditableMessageOfSelf;
                     if (messageToEdit) {
                         this.props.messageEdition.editingMessage = messageToEdit;

addons/mail/static/src/composer/navigable_list.js

@@ -145,6 +145,9 @@ export class NavigableList extends Component {
     }
 
     onKeydown(ev) {
+        if (!this.show) {
+            return;
+        }
         const hotkey = getActiveHotkey(ev);
         switch (hotkey) {
             case "enter":
@@ -155,29 +158,17 @@ export class NavigableList extends Component {
                 this.selectOption(ev, this.state.activeOption);
                 break;
             case "escape":
-                if (!this.show) {
-                    return;
-                }
                 markEventHandled(ev, "NavigableList.close");
                 this.close();
                 break;
             case "tab":
                 this.navigate("next");
-                if (!this.show) {
-                    this.open();
-                }
                 break;
             case "arrowup":
                 this.navigate("previous");
-                if (!this.show) {
-                    this.open();
-                }
                 break;
             case "arrowdown":
                 this.navigate("next");
-                if (!this.show) {
-                    this.open();
-                }
                 break;
             default:
                 return;

addons/mail/static/tests/composer/composer_tests.js

@@ -581,6 +581,19 @@ QUnit.test("quick edit last self-message from UP arrow", async (assert) => {
 
     await afterNextRender(() => triggerHotkey("ArrowUp"));
     assert.containsOnce($, ".o-mail-Message .o-mail-Composer");
+
+    await afterNextRender(() => triggerHotkey("Escape"));
+    assert.containsNone($, ".o-mail-Message .o-mail-Composer");
+    assert.strictEqual(document.activeElement, $(".o-mail-Composer-input")[0]);
+
+    // non-empty composer should not trigger quick edit
+    await insertText(".o-mail-Composer-input", "Shrek");
+    await triggerHotkey("ArrowUp");
+    // Navigable List relies on useEffect, which behaves with 2 animation frames
+    // Wait 2 animation frames to make sure it doesn't show quick edit
+    await nextTick();
+    await nextTick();
+    assert.containsNone($, ".o-mail-Message .o-mail-Composer");
 });
 
 QUnit.test("Select composer suggestion via Enter does not send the message", async (assert) => {