[IMP] web: improve SelectMenu and DomainSelectorDialog components

This commit makes some changes to the SelectMenu and DomainSelectorDialog
components, since they are now used by web_studio, in the sidebar editor.
Those changes makes them more in line with the features that were used by
their legacy counterpart.

Part-of: odoo/odoo#115799

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

@@ -53,6 +53,7 @@ DomainSelectorDialog.props = {
     defaultLeafValue: { type: Array, optional: true },
     initialValue: { type: String, optional: true },
     onSelected: { type: Function, optional: true },
+    text: { type: String, optional: true },
 };
 DomainSelectorDialog.defaultProps = {
     initialValue: "",

addons/web/static/src/core/domain_selector_dialog/domain_selector_dialog.xml

@@ -3,6 +3,7 @@
 
     <t t-name="web.DomainSelectorDialog" owl="1">
         <Dialog title="dialogTitle">
+            <div t-if="props.text" class="mb-3" t-out="props.text"/>
             <DomainSelector t-props="domainSelectorProps" />
             <t t-set-slot="footer">
                 <t t-if="props.readonly">

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

@@ -18,6 +18,8 @@ export class SelectMenu extends Component {
         class: "",
         togglerClass: "",
         onSelect: () => {},
+        required: false,
+        searchable: true,
         searchPlaceholder: _lt("Search..."),
         choices: [],
         groups: [],
@@ -57,6 +59,8 @@ export class SelectMenu extends Component {
         },
         class: { type: String, optional: true },
         togglerClass: { type: String, optional: true },
+        required: { type: Boolean, optional: true },
+        searchable: { type: Boolean, optional: true },
         searchPlaceholder: { type: String, optional: true },
         value: { optional: true },
         onSelect: { type: Function, optional: true },
@@ -116,7 +120,7 @@ export class SelectMenu extends Component {
     }
 
     canClear() {
-        return this.props.value != null;
+        return !this.props.required && this.props.value != null;
     }
 
     onInput(searchString) {

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

@@ -5,7 +5,7 @@
         <Dropdown
             class="`o_select_menu border w-100 rounded-2 overflow-hidden ${props.class || ''}`"
             togglerClass="`o_select_menu_toggler d-flex flex-row align-items-center flex-nowrap btn btn-secondary w-100 bg-light ${props.togglerClass || ''}`"
-            menuClass="'o_select_menu_menu pt-0'"
+            menuClass="`o_select_menu_menu${props.searchable ? ' pt-0' : ''}`"
             position="'bottom-fit'"
             beforeOpen.bind="filterOptions"
             onOpened.bind="onOpened"
@@ -23,7 +23,7 @@
                     <i class="fa fa-caret-down"></i>
                 </span>
             </t>
-            <div class="o_select_menu_input p-2 position-sticky top-0 start-0" t-ref="inputContainerRef">
+            <div t-if="props.searchable" class="o_select_menu_input p-2 position-sticky top-0 start-0" t-ref="inputContainerRef">
                 <input
                     type="text"
                     class="form-control"

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

@@ -179,7 +179,7 @@ QUnit.module("Web Components", (hooks) => {
     });
 
     QUnit.test(
-        "Clear button calls 'onSelect' with null value and appears only when value is null",
+        "Clear button calls 'onSelect' with null value and appears only when value is not null",
         async (assert) => {
             class Parent extends Component {
                 setup() {
@@ -214,6 +214,40 @@ QUnit.module("Web Components", (hooks) => {
         }
     );
 
+    QUnit.test(
+        "When the \"required\" props is set to true, the clear button is not shown",
+        async (assert) => {
+            class Parent extends Component {
+                setup() {
+                    this.state = useState({ value: null });
+                    this.choices = [
+                        { label: "Hello", value: "hello" },
+                        { label: "World", value: "world" },
+                    ];
+                }
+                setValue(newValue) {
+                    this.state.value = newValue;
+                }
+            }
+            Parent.components = { SelectMenu };
+            Parent.template = xml`
+            <SelectMenu
+                required="true"
+                choices="choices"
+                value="state.value"
+            />
+        `;
+
+            const parent = await mount(Parent, target, { env });
+            assert.containsNone(target, ".o_select_menu_toggler_clear", 'When the value is not set, there is no "clear" button');
+
+            parent.setValue("hello");
+            await nextTick();
+            assert.strictEqual(getValue(), "Hello");
+            assert.containsNone(target, ".o_select_menu_toggler_clear", 'When the value is set, there is no "clear" button');
+        }
+    );
+
     QUnit.test("Items are sorted based on their label", async (assert) => {
         class Parent extends Component {
             setup() {