diff --git a/addons/web/static/src/core/select_menu/select_menu.js b/addons/web/static/src/core/select_menu/select_menu.js index 7c4435e6907..925530922c5 100644 --- a/addons/web/static/src/core/select_menu/select_menu.js +++ b/addons/web/static/src/core/select_menu/select_menu.js @@ -114,11 +114,7 @@ export class SelectMenu extends Component { } get canDeselect() { - return ( - !this.props.required && - this.selectedChoice !== undefined && - this.selectedChoice !== null - ); + return !this.props.required && this.selectedChoice !== undefined; } get multiSelectChoices() { @@ -197,12 +193,8 @@ export class SelectMenu extends Component { } getSelectedChoice(props) { - if (props.value) { - const choices = [...props.choices, ...props.groups.flatMap((g) => g.choices)]; - return choices.find((c) => c.value === props.value); - } else { - return undefined; - } + const choices = [...props.choices, ...props.groups.flatMap((g) => g.choices)]; + return choices.find((c) => c.value === props.value); } onItemSelected(value) { diff --git a/addons/web/static/tests/core/select_menu_tests.js b/addons/web/static/tests/core/select_menu_tests.js index acb7fc9ce9a..920f1868d05 100644 --- a/addons/web/static/tests/core/select_menu_tests.js +++ b/addons/web/static/tests/core/select_menu_tests.js @@ -237,6 +237,93 @@ QUnit.module("Web Components", (hooks) => { ); }); + QUnit.test("Use a null value for choices", async (assert) => { + class Parent extends Component { + static components = { SelectMenu }; + static template = xml` + + `; + setup() { + this.choices = [ + { label: "Nothing", value: null }, + { label: "Everything", value: "things" }, + ]; + this.state = useState({ + value: null, + }); + } + setValue(newValue) { + this.state.value = newValue; + } + } + + const comp = await mount(Parent, target, { env }); + assert.equal( + getValue(), + "Nothing", + `The select value with an empty string has the "Null" value selected` + ); + + comp.setValue("things"); + await nextTick(); + assert.equal( + getValue(), + "Everything", + `After changing the value props, the select value shoud be "Everything"` + ); + }); + + QUnit.test( + "Use an empty string as the value for a choice display the corresponding choice", + async (assert) => { + class Parent extends Component { + static components = { SelectMenu }; + static template = xml` + + `; + setup() { + this.choices = [ + { label: "Empty", value: "" }, + { label: "Full", value: "full" }, + ]; + this.state = useState({ value: "" }); + } + setValue(newValue) { + this.state.value = newValue; + } + } + + const comp = await mount(Parent, target, { env }); + assert.equal( + getValue(), + "Empty", + `The select value with an empty string has the "Empty" value selected` + ); + + comp.setValue("full"); + await nextTick(); + assert.equal( + getValue(), + "Full", + `After changing the value props, the select value shoud be "Full"` + ); + + comp.setValue(null); + await nextTick(); + assert.equal( + getValue(), + "", + `After changing the value props to a null value, the select has no value selected` + ); + } + ); + QUnit.test( "Clear button calls 'onSelect' with null value and appears only when value is not null", async (assert) => {