fix: do not try to open a dialog when one is closing

This created a bug when clicking on "Add a filter for this field",
which is calling "dialog.accept()" and then opening a new dialog.
In this case, the new dialog opens before the "close" event has
been sent, so it catches it wrongly.

Author: yohanboniface

umap/static/umap/js/modules/ui/dialog.js

@@ -106,7 +106,6 @@ export default class Dialog extends WithTemplate {
   }
 
   open(settings = {}) {
-    this.dialog.returnValue = undefined
     const dialog = Object.assign({}, this.settings, settings)
     this.dialog.className = 'umap-dialog window'
     if (dialog.className) {
@@ -118,7 +117,6 @@ export default class Dialog extends WithTemplate {
     this.elements.cancel.hidden = !dialog.cancel
     this.elements.message.textContent = dialog.message
     this.elements.message.hidden = !dialog.message
-    this.elements.target = dialog.target || ''
     this.elements.template.innerHTML = ''
     if (dialog.template?.nodeType === 1) {
       this.elements.template.appendChild(dialog.template)
@@ -137,12 +135,13 @@ export default class Dialog extends WithTemplate {
     if (currentZIndex) {
       this.dialog.style.zIndex = currentZIndex + 1
     }
-
-    this.toggle(true)
-
+    if (this.dialogSupported) {
+      this.dialog.show()
+    } else {
+      this.dialog.hidden = false
+    }
     if (this.hasFormData) this.focusable[0].focus()
     else this.elements.accept.focus()
-
     return this.waitForUser()
   }
 
@@ -151,44 +150,40 @@ export default class Dialog extends WithTemplate {
   }
 
   close() {
-    this.toggle(false)
+    this._closing = true
+    if (this.dialogSupported) {
+      this.dialog.close()
+    } else {
+      this.dialog.hidden = true
+      this.dialog.dispatchEvent(new CustomEvent('close'))
+    }
   }
 
   accept() {
     this.dialog.returnValue = 'accept'
     this.close()
   }
 
-  toggle(open = false) {
-    if (this.dialogSupported) {
-      if (open) {
-        this.dialog.show()
-      } else {
-        this.dialog.close()
+  waitForUser() {
+    return new Promise((resolve) => {
+      const onClose = () => {
+        this._closing = false
+        if (this.dialog.returnValue === 'accept') {
+          const value = this.hasFormData ? this.collectFormData() : true
+          resolve(value)
+        }
       }
-    } else {
-      this.dialog.hidden = !open
-      if (this.elements.target && !open) {
-        this.elements.target.focus()
+      const waitForClose = () => {
+        this.dialog.returnValue = undefined
+        this.dialog.addEventListener('close', () => onClose(), { once: true })
       }
-      if (!open) {
-        this.dialog.dispatchEvent(new CustomEvent('close'))
+      if (this._closing) {
+        // We are opening a new dialog while another is not fully closed,
+        // so let's first wait for that one to be fully closed
+        this.dialog.addEventListener('close', () => waitForClose(), { once: true })
+      } else {
+        waitForClose()
       }
-    }
-  }
-
-  waitForUser() {
-    return new Promise((resolve) => {
-      this.dialog.addEventListener(
-        'close',
-        (event) => {
-          if (this.dialog.returnValue === 'accept') {
-            const value = this.hasFormData ? this.collectFormData() : true
-            resolve(value)
-          }
-        },
-        { once: true }
-      )
     })
   }
 

umap/tests/integration/test_filters.py

@@ -419,3 +419,52 @@ def test_deleting_field_from_map_should_delete_filter(live_server, page, openmap
         "foobar": {"widget": "minmax", "label": "Foo Bar"},
         "name": {"widget": "checkbox", "label": "Bar Foo"},
     }
+
+
+def test_can_create_filter_from_new_field(live_server, page, openmap):
+    openmap.settings["properties"]["onLoadPanel"] = "datafilters"
+    openmap.save()
+    DataLayerFactory(map=openmap, data=DATALAYER_DATA1)
+    page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
+    page.get_by_role("button", name="Manage layers").click()
+    page.get_by_role("button", name="Edit", exact=True).nth(1).click()
+    page.get_by_role("heading", name="Fields, filters and keys").click()
+    page.get_by_role("button", name="Add a new field").click()
+    page.get_by_role("textbox", name="Field Name ✔").fill("foobar")
+    page.get_by_role("button", name="Add filter for this field").click()
+    page.get_by_role("textbox", name="Human readable name of the").fill("Foo Bar")
+    page.wait_for_timeout(300)  # Input throttling.
+    page.get_by_text("Edit this field").click()
+    expect(page.locator(".umap-filter span").filter(has_text="Foo Bar")).to_be_visible()
+    with page.expect_response(re.compile(r".*/datalayer/update/")):
+        page.get_by_role("button", name="Save").click()
+    saved = DataLayer.objects.first()
+    assert saved.settings["fields"] == [
+        {
+            "key": "mytype",
+            "type": "String",
+        },
+        {
+            "key": "name",
+            "type": "String",
+        },
+        {
+            "key": "mynumber",
+            "type": "String",
+        },
+        {
+            "key": "mydate",
+            "type": "String",
+        },
+        {
+            "key": "foobar",
+            "type": "String",
+        },
+    ]
+
+    assert saved.settings["filters"] == {
+        "foobar": {
+            "label": "Foo Bar",
+            "widget": "checkbox",
+        },
+    }