[FIX] web: fix displayed label of the SelectMenu

This commit fixes the wrong label that was displayed when options
are defined inside groups. Since displayValue was only looking for
a label on choices set using the choices props, the getter was only
returning the technical value for choices defined in groups.

A test has been modified to verify that the correct label is shown,
also on choices present inside of a group. This test previously
asserted that, but only on choices given by the choices props.

closes odoo/odoo#112766

X-original-commit: 176e61d5c25111a1e9339a0687bb526d1d430790
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Luca Vitali <luvi@odoo.com>

addons/web/static/src/core/select_menu/select_menu.js

@@ -83,11 +83,11 @@ export class SelectMenu extends Component {
     }
 
     get displayValue() {
-        if (this.props.value) {
-            const value = this.props.choices.find((c) => c.value === this.props.value);
+        if (this.props.value !== undefined) {
+            const choices = [...this.props.choices, ...this.props.groups.flatMap((g) => g.choices)];
+            const value = choices.find((c) => c.value === this.props.value);
             return value ? value.label : this.props.value;
         }
-        return this.props.value;
     }
 
     onOpened() {

addons/web/static/tests/core/select_menu_tests.js

@@ -102,7 +102,14 @@ QUnit.module("Web Components", (hooks) => {
                     this.state = useState({ value: "world" });
                     this.choices = [
                         { label: "Hello", value: "hello" },
-                        { label: "World", value: "world" },
+                    ];
+                    this.groups = [
+                        {
+                            label: "Group A",
+                            choices: [
+                                { label: "World", value: "world" },
+                            ]
+                        }
                     ];
                 }
 
@@ -114,6 +121,7 @@ QUnit.module("Web Components", (hooks) => {
             Parent.components = { SelectMenu };
             Parent.template = xml`
             <SelectMenu
+                groups="groups"
                 choices="choices"
                 value="state.value"
                 onSelect.bind="onSelect"