diff --git a/addons/website/static/src/snippets/s_website_form/options.js b/addons/website/static/src/snippets/s_website_form/options.js index 8c4555dad53..da8bfdc5874 100644 --- a/addons/website/static/src/snippets/s_website_form/options.js +++ b/addons/website/static/src/snippets/s_website_form/options.js @@ -1485,7 +1485,9 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({ const inputEl = this.$target[0].querySelector('input'); const dataFillWith = inputEl ? inputEl.dataset.fillWith : undefined; const hasConditionalVisibility = this.$target[0].classList.contains('s_website_form_field_hidden_if'); - const previousName = this.$target[0].querySelector('.s_website_form_input').name; + const previousInputEl = this.$target[0].querySelector('.s_website_form_input'); + const previousName = previousInputEl.name; + const previousType = previousInputEl.type; [...this.$target[0].childNodes].forEach(node => node.remove()); [...fieldEl.childNodes].forEach(node => this.$target[0].appendChild(node)); [...fieldEl.attributes].forEach(el => this.$target[0].removeAttribute(el.nodeName)); @@ -1494,8 +1496,10 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({ this.$target[0].classList.add('s_website_form_field_hidden_if', 'd-none'); } const dependentFieldEls = this.formEl.querySelectorAll(`.s_website_form_field[data-visibility-dependency="${previousName}"]`); - const newName = this.$target[0].querySelector('.s_website_form_input').name; - if (previousName !== newName && dependentFieldEls) { + const newFormInputEl = this.$target[0].querySelector('.s_website_form_input'); + const newName = newFormInputEl.name; + const newType = newFormInputEl.type; + if ((previousName !== newName || previousType !== newType) && dependentFieldEls) { // In order to keep the visibility conditions consistent, // when the name has changed, it means that the type has changed so // all fields whose visibility depends on this field must be updated so that @@ -1517,10 +1521,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({ _setVisibilityDependency(value) { delete this.$target[0].dataset.visibilityCondition; delete this.$target[0].dataset.visibilityComparator; - const previousDependency = this._getDependencyEl(); - if (this.formEl.querySelector(`.s_website_form_input[name="${value}"]`).type !== (previousDependency && previousDependency.type)) { - this.rerender = true; - } + this.rerender = true; this.$target[0].dataset.visibilityDependency = value; }, /** diff --git a/addons/website/static/tests/tours/website_form_editor.js b/addons/website/static/tests/tours/website_form_editor.js index 3cb1a46c18f..c1a429bba49 100644 --- a/addons/website/static/tests/tours/website_form_editor.js +++ b/addons/website/static/tests/tours/website_form_editor.js @@ -227,6 +227,23 @@ trigger: "iframe .s_website_form_field:contains('Test conditional visibility') .s_website_form_field_description", isCheck: true, }, + // Check that visibility condition is deleted on dependency type change. + ...addCustomField("char", "text", "dependent", false, {visibility: CONDITIONALVISIBILITY}), + ...addCustomField("selection", "radio", "dependency", false), + ...selectFieldByLabel("dependent"), + ...selectButtonByData('data-set-visibility-dependency="dependency"'), + ...selectFieldByLabel("dependency"), + ...selectButtonByData('data-custom-field="char"'), + ...selectFieldByLabel("dependent"), + { + content: "Open the select", + trigger: 'we-select:has(we-button[data-set-visibility="visible"]) we-toggler', + }, + { + content: "Check that the field no longer has conditional visibility", + trigger: "we-select we-button[data-set-visibility='visible'].active", + isCheck: true, + }, ...addExistingField('date', 'text', 'Test Date', true), @@ -459,6 +476,16 @@ ...addCustomField("char", "text", "field C", false), ...selectFieldByLabel("field B"), ...selectButtonByText(CONDITIONALVISIBILITY), + ...selectButtonByText(CONDITIONALVISIBILITY), + { + content: "Check that there is a comparator after two clicks on 'Visible only if'", + trigger: "[data-attribute-name='visibilityComparator']", + run: function () { + if (!this.$anchor[0].querySelector("we-button.active")) { + console.error("A default comparator should be set"); + } + }, + }, ...selectButtonByData('data-set-visibility-dependency="field C"'), ...selectButtonByData('data-select-data-attribute="set"'), ...wTourUtils.clickOnSave(),