diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index 3a91fe2be1c..2870303a53a 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1872,10 +1872,10 @@ var SnippetsMenu = Widget.extend({ tab = tab || this.tabs.BLOCKS; - while (this.customizePanel.firstChild) { - this.customizePanel.removeChild(this.customizePanel.firstChild); - } if (content) { + while (this.customizePanel.firstChild) { + this.customizePanel.removeChild(this.customizePanel.firstChild); + } $(this.customizePanel).append(content); } diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index e5b1d525316..dd4f974918b 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -52,17 +52,17 @@ weSnippetEditor.Class.include({ this.el.appendChild(this.fakeThemeEl); } - await this._activateSnippet($(this.fakeThemeEl)); - - if (!this.themeCustomizationMenuEl) { - this.themeCustomizationMenuEl = document.createElement('div'); - for (const node of this.customizePanel.childNodes) { - this.themeCustomizationMenuEl.appendChild(node); - } - } + // Need all of this in that order so that: + // - the element is visible and can be enabled and the onFocus method is + // called each time. + // - the element is hidden afterwards so it does not take space in the + // DOM, same as the overlay which may make a scrollbar appear. + this.fakeThemeEl.classList.remove('d-none'); + const editor = await this._activateSnippet($(this.fakeThemeEl)); + this.fakeThemeEl.classList.add('d-none'); + editor.toggleOverlay(false); this._updateLeftPanelContent({ - content: this.themeCustomizationMenuEl, tab: this.tabs.THEME, }); },