diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 3147d292bcb..15c49a68e56 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1956,7 +1956,8 @@ const ListUserValueWidget = UserValueWidget.extend({ 'click we-button.o_we_list_add_existing': '_onAddExistingItemClick', 'click we-select.o_we_user_value_widget.o_we_add_list_item': '_onAddItemSelectClick', 'click we-button.o_we_checkbox_wrapper': '_onAddItemCheckboxClick', - 'change table input': '_onListItemChange', + 'input table input': '_onListItemBlurInput', + 'blur table input': '_onListItemBlurInput', }, /** @@ -2171,8 +2172,9 @@ const ListUserValueWidget = UserValueWidget.extend({ }, /** * @private + * @param {Boolean} [preview] */ - _notifyCurrentState() { + _notifyCurrentState(preview = false) { const values = [...this.listTable.querySelectorAll('.o_we_list_record_name input')].map(el => { let id = this.isCustom ? el.value : el.name; if (this.el.dataset.idMode && this.el.dataset.idMode === "name") { @@ -2199,7 +2201,11 @@ const ListUserValueWidget = UserValueWidget.extend({ }); } this._value = JSON.stringify(values); - this.notifyValueChange(false); + if (preview) { + this._onUserValuePreview(); + } else { + this._onUserValueChange(); + } if (!this.createWidget && !this.isCustom) { this._reloadSelectDropdown(values); } @@ -2274,9 +2280,19 @@ const ListUserValueWidget = UserValueWidget.extend({ }, /** * @private + * @param {Event} ev */ - _onListItemChange() { - this._notifyCurrentState(); + _onListItemBlurInput(ev) { + const preview = ev.type === 'input'; + if (preview || !this.el.contains(ev.relatedTarget) || this.el.dataset.renderOnInputBlur) { + // We call the function below only if the element that recovers the + // focus after this blur is not an element of the we-list or if it + // is an input event (preview). This allows to use the TAB key to go + // from one input to another in the list. This behavior can be + // cancelled if the widget has reloadOnInputBlur = "true" in its + // dataset. + this._notifyCurrentState(preview); + } }, /** * @private diff --git a/addons/website/static/tests/tours/snippet_social_media.js b/addons/website/static/tests/tours/snippet_social_media.js index 9e903a96ecb..a054d84fd87 100644 --- a/addons/website/static/tests/tours/snippet_social_media.js +++ b/addons/website/static/tests/tours/snippet_social_media.js @@ -20,7 +20,7 @@ const addNewSocialNetwork = function (optionIndex, linkIndex, url) { { content: "Change added Option label", trigger: `we-list table input:eq(${optionIndex})`, - run: `text ${url}`, + run: `text_blur ${url}`, }, { content: "Ensure new link is changed", @@ -79,7 +79,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_social_media', { { content: 'Change custom social to unsupported link', trigger: 'we-list table input:eq(5)', - run: 'text https://www.paypal.com/abc', + run: 'text_blur https://www.paypal.com/abc', }, { content: "Ensure paypal icon is found", @@ -118,7 +118,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_social_media', { { content: 'Change url of the DB instagram link', trigger: 'we-list table input:eq(3)', - run: 'text https://instagram.com/odoo.official/', + run: 'text_blur https://instagram.com/odoo.official/', }, { content: 'Save', diff --git a/addons/website/views/snippets/s_social_media.xml b/addons/website/views/snippets/s_social_media.xml index 9c48389a757..2130b22d15e 100644 --- a/addons/website/views/snippets/s_social_media.xml +++ b/addons/website/views/snippets/s_social_media.xml @@ -32,7 +32,8 @@ + data-new-elements-not-toggleable="true" data-no-preview="true" + data-render-on-input-blur="true"/>