From e6e3722dec188c110f499cd3b7e667355dea8bf0 Mon Sep 17 00:00:00 2001
From: Leonardo Pavan Rocha <lpr@odoo.com>
Date: Mon, 21 Aug 2023 17:33:04 +0200
Subject: [PATCH] [FIX] web: show caret in NameAndSignature

Adds a caret to the font selection in the NameAndSignature component.
Prior to this change, the font icon was hidden without the caret.

Also, the caret direction is not being correctly updated when the target
element is closed. This commit fixes this by storing the initial direction
and forcing this direction when the dropdown is closed.

task-3431069

closes odoo/odoo#135774

X-original-commit: 7d11e281fa70a853191378bee3750d12bb76f9b9
Related: odoo/enterprise#47513
Signed-off-by: Bruno Boi (boi) <boi@odoo.com>
---
 .../web/static/src/core/dropdown/dropdown.js  |  6 +++
 .../src/core/signature/name_and_signature.xml |  2 +-
 .../web/static/tests/core/dropdown_tests.js   | 40 +++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/dropdown/dropdown.js b/addons/web/static/src/core/dropdown/dropdown.js
index 3925792f75f..c86f524f395 100644
--- a/addons/web/static/src/core/dropdown/dropdown.js
+++ b/addons/web/static/src/core/dropdown/dropdown.js
@@ -100,6 +100,7 @@ export class Dropdown extends Component {
         if (["left", "right"].includes(direction) && localization.direction === "rtl") {
             direction = direction === "left" ? "right" : "left";
         }
+        this.defaultDirection = direction;
         const positioningOptions = {
             popper: "menuRef",
             position,
@@ -186,6 +187,11 @@ export class Dropdown extends Component {
                 return;
             }
         }
+
+        if (!stateSlice.open) {
+            this.state.directionCaretClass = DIRECTION_CARET_CLASS[this.defaultDirection];
+        }
+
         // Update the state
         Object.assign(this.state, stateSlice);
         // Notify over the bus
diff --git a/addons/web/static/src/core/signature/name_and_signature.xml b/addons/web/static/src/core/signature/name_and_signature.xml
index 21530b274a3..b572b302ba2 100644
--- a/addons/web/static/src/core/signature/name_and_signature.xml
+++ b/addons/web/static/src/core/signature/name_and_signature.xml
@@ -70,7 +70,7 @@
 
                         <div class="col-auto division ms-auto"></div>
 
-                        <Dropdown t-if="state.signMode === 'auto'" class="'o_web_sign_auto_select_style col-auto'" togglerClass="'btn btn-link fa fa-font'">
+                        <Dropdown t-if="state.signMode === 'auto'" class="'o_web_sign_auto_select_style col-auto'" showCaret="true" togglerClass="'btn btn-link fa fa-font'">
                             <t t-foreach="fonts" t-as="font" t-key="font_index">
                                 <DropdownItem onSelected="() => this.onSelectFont(font_index)">
                                     <img class="img-fluid" t-att-src="getSVGTextFont(font)"/>
diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js
index eb072562844..56ccb9b9c08 100644
--- a/addons/web/static/tests/core/dropdown_tests.js
+++ b/addons/web/static/tests/core/dropdown_tests.js
@@ -1079,6 +1079,46 @@ QUnit.module("Components", ({ beforeEach }) => {
         );
     });
 
+    QUnit.test("caret should be repositioned to default direction when closed", async (assert) => {
+        class Parent extends Component {
+            static components = { Dropdown };
+            static template = xml`
+                <div style="height: 384px;"/> <!-- filler: takes half the runbot's browser_size -->
+                <Dropdown showCaret="true">
+                    <t t-set-slot="toggler">🍋</t>
+                    <div style="height: 400px; width: 50px;"/> <!-- menu filler -->
+                </Dropdown>
+            `;
+        }
+        // The fixture should be shown for this test, as the positioning container is the html node
+        target.style.position = "fixed";
+        target.style.top = "0";
+        target.style.left = "0";
+
+        env = await makeTestEnv();
+        await mount(Parent, target, { env });
+        const dropdown = target.querySelector(".o-dropdown");
+        assert.doesNotHaveClass(dropdown, "show");
+        assert.hasClass(dropdown, "dropdown");
+
+        // open
+        await click(target, ".dropdown-toggle");
+        await nextTick(); // awaits for the caret to get patched
+        assert.hasClass(dropdown, "show");
+        assert.hasClass(dropdown, "dropend");
+
+        // close
+        await click(target, ".dropdown-toggle");
+        assert.doesNotHaveClass(dropdown, "show");
+        assert.hasClass(dropdown, "dropdown");
+
+        // open
+        await click(target, ".dropdown-toggle");
+        await nextTick(); // awaits for the caret to get patched
+        assert.hasClass(dropdown, "show");
+        assert.hasClass(dropdown, "dropend");
+    });
+
     QUnit.test(
         "multi-level dropdown: mouseentering a dropdown item should close any subdropdown",
         async (assert) => {