Popup fixes

addons/html_builder/static/src/website_builder/plugins/edit_interaction_plugin.js

@@ -6,7 +6,6 @@ export class EditInteractionPlugin extends Plugin {
 
     resources = {
         normalize_handlers: this.restartInteractions.bind(this),
-        option_visibility_updated: this.restartInteractions.bind(this),
         content_manually_updated_handlers: this.restartInteractions.bind(this),
     };
 

addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js

@@ -120,15 +120,12 @@ class PopupOptionPlugin extends Plugin {
         // save (see save plugin) and Bootstrap moves it if it is not within the
         // document (see Bootstrap Modal's _showElement).
         if (target.matches(".s_popup") && this.editable.contains(target)) {
-            const modalEl = target.querySelector(".modal");
-            this.window.Modal.getOrCreateInstance(modalEl).show();
-            target.classList.remove("d-none");
+            this.window.Modal.getOrCreateInstance(target.querySelector(".modal")).show();
         }
     }
 
     onTargetHide(target) {
         if (target.matches(".s_popup")) {
-            target.classList.add("d-none");
             this.window.Modal.getOrCreateInstance(target.querySelector(".modal")).hide();
         }
     }
@@ -138,6 +135,7 @@ class PopupOptionPlugin extends Plugin {
             modalEl.parentElement.dataset.invisible = "1";
             // Do not call .hide() directly, because it is queued whereas
             // .dispose() is not.
+            modalEl.classList.remove("show");
             this.window.Modal.getOrCreateInstance(modalEl)._hideModal();
             this.window.Modal.getInstance(modalEl).dispose();
         }

addons/web/static/src/public/interaction_service.js

@@ -158,11 +158,7 @@ class InteractionService {
     stopInteractions(el = this.el) {
         const interactions = [];
         for (const interaction of this.interactions.slice().reverse()) {
-            if (
-                el === interaction.el ||
-                el.contains(interaction.el) ||
-                interaction.el.closest("[data-invisible='1']")
-            ) {
+            if (el === interaction.el || el.contains(interaction.el)) {
                 interaction.destroy();
                 this.activeInteractions.delete(interaction.el, interaction.interaction.constructor);
             } else {

addons/website/static/src/core/website_edit_service.js

@@ -111,12 +111,6 @@ PublicRoot.include({
 // Patch Colibri.
 
 patch(Colibri.prototype, {
-    async start() {
-        if (this.el.closest("[data-invisible='1']")) {
-            return;
-        }
-        return super.start();
-    },
     protectSyncAfterAsync(interaction, name, fn) {
         fn = super.protectSyncAfterAsync(interaction, name, fn);
         const fullName = `${interaction.constructor.name}/${name}`;

addons/website/static/src/interactions/popup/popup.js

@@ -101,6 +101,7 @@ export class Popup extends Interaction {
             // animations here, bypass the issue with ._hideModal().
             // Additionally, .hide() triggers `hide.bs.modal`, which triggers
             // onHideModal() and sets a cookie: we don't want that on destroy.
+            this.modalEl.classList.remove("show");
             this.bsModal._hideModal();
         });
     }

addons/website/static/src/interactions/popup/shared_popup.js

@@ -18,12 +18,16 @@ export class SharedPopup extends Interaction {
         // ugly white bar.
         // tl;dr: this is keeping those 2 elements visibility synchronized.
         _root: {
-            "t-on-show.bs.modal": () => this.popupShown = true,
+            "t-on-show.bs.modal.noUpdate": () => {
+                this.popupShown = true;
+                // Combining noUpdate and `this.updateContent()` forces a
+                // repaint immediately to remove `.d-none` before the transition
+                // happens. Otherwise, the transition isn't visible.
+                this.updateContent();
+            },
             "t-on-shown.bs.modal": () => this.popupShown = true,
             "t-on-hidden.bs.modal": this.onModalHidden,
-            "t-att-class": () => ({
-                "d-none": !this.popupShown,
-            }),
+            "t-att-class": () => ({ "d-none": !this.popupShown }),
         },
     };