Scroll to the clone and activate its option only if needed

odoo-dev · FrancoisGe · May 20, 2025 · May 12, 2025 · May 13, 2025 · May 14, 2025
commit 0d217dcea8e3c26e89b61160b0be1d8d0608c9fc
diff --git a/addons/html_builder/static/src/core/clone_plugin.js b/addons/html_builder/static/src/core/clone_plugin.js
@@ -70,25 +70,43 @@ export class ClonePlugin extends Plugin {
             title: _t("Duplicate"),
             disabledReason,
             handler: () => {
-                this.cloneElement(this.overlayTarget, { scrollToClone: true });
+                this.cloneElement(this.overlayTarget, { activateClone: false });
                 this.dependencies.history.addStep();
             },
         });
         return buttons;
     }
 
-    cloneElement(el, { position = "afterend", scrollToClone = false } = {}) {
+    /**
+     * Duplicates the given element and returns the created clone.
+     *
+     * @param {HTMLElement} el the element to clone
+     * @param {Object}
+     *   - `position`: specifies where to position the clone (first parameter of
+     *     the `insertAdjacentElement` function)
+     *   - `scrollToClone`: true if the we should scroll to the clone (if not in
+     *     the viewport), false otherwise
+     *   - `activateClone`: true if the option containers of the clone should be
+     *     the active ones, false otherwise
+     * @returns {HTMLElement}
+     */
+    cloneElement(el, { position = "afterend", scrollToClone = false, activateClone = true } = {}) {
         this.dispatchTo("on_will_clone_handlers", { originalEl: el });
-        // TODO cleanUI resource for each option
         const cloneEl = el.cloneNode(true);
-        this.cleanElement(cloneEl);
+        this.cleanElement(cloneEl); // TODO check that
         el.insertAdjacentElement(position, cloneEl);
-        this.dependencies["builder-options"].updateContainers(cloneEl);
-        this.dispatchTo("on_cloned_handlers", { cloneEl: cloneEl, originalEl: el });
+
+        // Update the containers if required.
+        if (activateClone) {
+            this.dependencies["builder-options"].updateContainers(cloneEl);
+        }
+
+        // Scroll to the clone if required and if it is not visible.
         if (scrollToClone && !isElementInViewport(cloneEl)) {
             cloneEl.scrollIntoView({ behavior: "smooth", block: "center" });
         }
-        // TODO snippet_cloned ?
+
+        this.dispatchTo("on_cloned_handlers", { cloneEl: cloneEl, originalEl: el });
         return cloneEl;
     }
 

diff --git a/addons/html_builder/static/src/sidebar/option_container.js b/addons/html_builder/static/src/sidebar/option_container.js
@@ -124,7 +124,7 @@ export class OptionsContainer extends BaseOptionComponent {
     cloneElement() {
         this.callOperation(() => {
             this.env.editor.shared.clone.cloneElement(this.props.editingElement, {
-                scrollToClone: true,
+                activateClone: false,
             });
         });
     }