[FIX] analytic: fix styling of analytic distribution tags widget

The analytic distribution widget in the Analytic Distribution Model form displayed its selection field on a new line, making it too large and odd. This PR fixes the styling and simplifies the widget.

closes odoo/odoo#103282

X-original-commit: 73b11378b18a709537dff5b60373b40009a04a14
Signed-off-by: Ayob Habib (ayh) <ayh@odoo.com>

addons/analytic/static/src/components/analytic_distribution/analytic_distribution.js

@@ -569,7 +569,7 @@ export class AnalyticDistribution extends Component {
 
     }
 }
-AnalyticDistribution.template = "analytic_distribution";
+AnalyticDistribution.template = "analytic.AnalyticDistribution";
 AnalyticDistribution.supportedTypes = ["char", "text"];
 AnalyticDistribution.components = {
     AnalyticAutoComplete,
@@ -595,8 +595,4 @@ AnalyticDistribution.extractProps = ({ field, attrs }) => {
     };
 };
 
-export class AnalyticDistributionForm extends AnalyticDistribution {}
-AnalyticDistributionForm.template = "analytic_distribution_form";
-
 registry.category("fields").add("analytic_distribution", AnalyticDistribution);
-registry.category("fields").add("form.analytic_distribution", AnalyticDistributionForm);

addons/analytic/static/src/components/analytic_distribution/analytic_distribution.scss

@@ -1,4 +1,39 @@
-.analytic_distribution {
+.o_field_analytic_distribution {
+
+    .analytic_distribution_placeholder {
+        height: 1.5em;
+        width: 20px;
+    }
+
+    .o_input_dropdown {
+        flex: 1 0 20px;
+
+        &:focus {
+            outline: none;
+        }
+
+        &:hover {
+            .o_dropdown_button {
+                display: unset;
+            }
+        }
+
+        .o_dropdown_button {
+            display: none;
+        }
+    }
+
+    .badge {
+        margin: 1px 2px 1px 0;
+        border: none;
+        padding-left: 0.6em;
+        padding-right: 0.6em;
+        min-width: unset;
+
+        .o_delete {
+            padding-left: 4px;
+        }
+    }
 
     .analytic_distribution_popup {
         width: 400px;
@@ -30,24 +65,4 @@
             outline: none !important;
         }
     }
-
-    .tag-list {
-        .badge {
-            margin: 1px 2px 1px 0;
-            border: none;
-
-            .o_delete {
-                padding-left: 4px;
-            }
-        }
-    }
-
-    .hidden-focus {
-        // focus to this element is required but we want to hide the blue outline
-        &:focus {
-            // z-index: -10;
-            outline: none;
-        }
-    }
-
 }

addons/analytic/static/src/components/analytic_distribution/analytic_distribution.xml

@@ -1,39 +1,18 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="analytic_distribution" owl="1">
-        <div class="analytic_distribution" t-ref="analyticDistribution" t-on-keydown="onWidgetKeydown">
-            <t t-call="analytic_distribution.tags"/>
-            <t t-if="!props.readonly">
-                <div class="o_input o_input_dropdown hidden-focus" tabindex="0" t-ref="mainElement" t-on-focus="onMainElementFocus">
-                    <a role="button" class="o_dropdown_button" draggable="false" />
-                    <t t-call="analytic_distribution.popup"/>
-                </div>
-            </t>
-        </div>
-    </t>
-
-    <t t-name="analytic_distribution_form" owl="1">
-        <div class="analytic_distribution" t-ref="analyticDistribution" t-on-keydown="onWidgetKeydown">
-
-            <t t-call="analytic_distribution.tags"/>
-            <t t-if="!props.readonly">
-                <div class="o_input o_input_dropdown hidden-focus" tabindex="0" t-ref="mainElement" t-on-focus="onMainElementFocus" t-on-click="onMainElementFocus">
-                    <input class="invisible"/>
-                    <a role="button" class="o_dropdown_button" draggable="false" />
-                    <t t-call="analytic_distribution.popup"/>
-                </div>
-            </t>
-        </div>
-    </t>
-
-    <t t-name="analytic_distribution.tags" owl="1">
-        <div class="tag-list d-inline-flex flex-wrap">
+    <t t-name="analytic.AnalyticDistribution" owl="1">
+        <div class="o_field_tags d-inline-flex flex-wrap mw-100" t-att-class="{'o_tags_input o_input': !props.readonly}" t-ref="analyticDistribution" t-on-keydown="onWidgetKeydown">
             <TagsList tags="tags"/>
+            <div t-if="!props.readonly" class="o_input_dropdown d-inline-flex w-100" tabindex="0" t-ref="mainElement" t-on-focus="onMainElementFocus" t-on-click="onMainElementFocus">
+                <span class="analytic_distribution_placeholder"/>
+                <a role="button" class="o_dropdown_button" draggable="false"/>
+                <t t-call="analytic.AnalyticDistributionPopup"/>
+            </div>
         </div>
     </t>
 
-    <t t-name="analytic_distribution.popup" owl="1">
+    <t t-name="analytic.AnalyticDistributionPopup" owl="1">
         <div class="analytic_distribution_popup o-dropdown-menu show rounded py-0" t-if="state.showDropdown" t-ref="analyticDropdown">
             <div class="popover-header">
                 <div class="d-flex">

addons/analytic/static/tests/analytic_distribution_tests.js

@@ -124,7 +124,7 @@ QUnit.module("Analytic", (hooks) => {
             },
         });
 
-        assert.containsOnce(target, ".analytic_distribution", "widget should be visible");
+        assert.containsOnce(target, ".o_field_analytic_distribution", "widget should be visible");
         assert.containsN(target, ".badge", 2, "should contain 2 tags");
         assert.strictEqual(target.querySelector(".badge .o_tag_badge_text").textContent, "RD 30.3%",
             "should have rendered 'RD 30.3%'"