Merge pull request #1081 from Patternslib/fix-inject-close-panel

Fix inject close panel

Author: thet

src/core/dom.js

@@ -279,6 +279,18 @@ const set_data = (el, name, value) => {
     el[`${DATA_PREFIX}${name}`] = value;
 };
 
+/**
+ * Delete a variable from the node instance.
+ * We are using a prefix to make sure the data doesn't collide with other attributes.
+ *
+ * @param el {Node} - The DOM node which we want to delete the variable from.
+ * @param name {String} - The name of the variable. Note - this is stored on
+ *                        the DOM node prefixed with the DATA_PREFIX.
+ */
+const delete_data = (el, name) => {
+    delete el[`${DATA_PREFIX}${name}`];
+};
+
 /**
  * Simple template engine, based on JS template literal
  *
@@ -315,6 +327,7 @@ const dom = {
     find_scroll_container: find_scroll_container,
     get_data: get_data,
     set_data: set_data,
+    delete_data: delete_data,
     template: template,
     add_event_listener: events.add_event_listener, // BBB export. TODO: Remove in an upcoming version.
     remove_event_listener: events.remove_event_listener, // BBB export. TODO: Remove in an upcoming version.

src/core/dom.test.js

@@ -696,7 +696,7 @@ describe("core.dom tests", () => {
         });
     });
 
-    describe("set_data, get_data", function () {
+    describe("set_data, get_data, delete_data", function () {
         it("can be used to store and retrieve data on DOM nodes.", function () {
             const el = document.createElement("div");
             dom.set_data(el, "test_data", "hello.");
@@ -715,6 +715,13 @@ describe("core.dom tests", () => {
             expect(dom.get_data(el, "test_data", null)).toBe(null);
             expect(dom.get_data(el, "test_data")).toBe(undefined);
         });
+        it("can also delete the data from dom nodes.", function () {
+            const el = document.createElement("div");
+            dom.set_data(el, "test_data", "hello.");
+            expect(dom.get_data(el, "test_data")).toBe("hello.");
+            dom.delete_data(el, "test_data");
+            expect(dom.get_data(el, "test_data")).toBe(undefined);
+        });
     });
 
     describe("template", () => {

src/pat/inject/inject.js

@@ -768,11 +768,11 @@ const inject = {
             // Wait for the next tick to ensure that the close-panel listener
             // is called before this one, even for non-async local injects.
             await utils.timeout(1);
+            // Remove the close-panel event listener.
+            events.remove_event_listener($el[0], "pat-inject--close-panel");
             // Only close the panel if a close-panel event was catched previously.
             if (do_close_panel) {
                 do_close_panel = false;
-                // Remove the close-panel event listener.
-                events.remove_event_listener($el[0], "pat-inject--close-panel");
                 // Re-trigger close-panel event if it was caught while injection was in progress.
                 $el[0].dispatchEvent(
                     new Event("close-panel", { bubbles: true, cancelable: true })