From dfda7a14c144611bf63ea9f40504e035221a20c2 Mon Sep 17 00:00:00 2001
From: "Bastien Fafchamps (bafa)" <bafa@odoo.com>
Date: Wed, 8 Feb 2023 14:32:14 +0000
Subject: [PATCH] [IMP] web: SelectMenu: Truncate selected value while keeping
 auto width

Before this commit:
When the label of the selected value was too long, the SelectMenu width
would grow indefinitely to accomodate, this behaviour was causing some
layouts to break.

After this commit:
The width of the SelectMenu is still automatic and will try to fill its
parent but will not make it grow. Instead, if the label is too long and
does not fit in the parent, it will be truncated.

Solution:
Using a grid display we can easly set the label to auto and truncate it
while keeping a constant size for the icons.

closes odoo/odoo#115799

Related: odoo/enterprise#37285
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../src/core/select_menu/select_menu.scss     | 23 +++++++++++++++----
 .../src/core/select_menu/select_menu.xml      |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/addons/web/static/src/core/select_menu/select_menu.scss b/addons/web/static/src/core/select_menu/select_menu.scss
index f7af0264bfd..5552f714f9a 100644
--- a/addons/web/static/src/core/select_menu/select_menu.scss
+++ b/addons/web/static/src/core/select_menu/select_menu.scss
@@ -1,12 +1,27 @@
 .o_select_menu {
+    .o_select_menu_toggler {
+        display: grid;
+        grid-template-columns: auto 25px;
+    }
+    .o_select_menu_toggler.o_can_deselect {
+        grid-template-columns: auto 25px 25px;
+    }
+
     .o_select_menu_toggler_slot {
         flex-grow: 2;
     }
-    .o_select_menu_toggler_caret,
-    .o_select_menu_toggler_clear {
-        width: 2rem;
-        flex-basis: 1;
+
+    .o_select_menu_toggler_caret {
+        grid-column: 2;
     }
+    .o_can_deselect .o_select_menu_toggler_caret {
+        grid-column: 3;
+    }
+
+    .o_select_menu_toggler_clear {
+        grid-column: 2;
+    }
+
     .o_select_menu_toggler_clear:hover i {
         color: red;
     }
diff --git a/addons/web/static/src/core/select_menu/select_menu.xml b/addons/web/static/src/core/select_menu/select_menu.xml
index b169398f9fc..075685cafc8 100644
--- a/addons/web/static/src/core/select_menu/select_menu.xml
+++ b/addons/web/static/src/core/select_menu/select_menu.xml
@@ -4,7 +4,7 @@
     <t t-name="web.SelectMenu" owl="1">
         <Dropdown
             class="`o_select_menu border w-auto rounded-2 overflow-hidden ${props.class || ''}`"
-            togglerClass="`o_select_menu_toggler btn btn-secondary w-100 bg-light ${props.togglerClass || ''}`"
+            togglerClass="`o_select_menu_toggler btn btn-secondary w-100 bg-light ${props.togglerClass || ''} ${canDeselect ? 'o_can_deselect' : ''}`"
             menuClass="`o_select_menu_menu${props.searchable ? ' pt-0' : ''}${props.multiSelect ? ' o_select_menu_multi_select' : ''}`"
             position="'bottom-fit'"
             beforeOpen.bind="filterOptions"