[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>

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

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)"/>

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) => {