From 0649eee36617900c03ade3a87ffb9637bdf4bf7a Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 14 Apr 2019 19:47:30 -0700
Subject: [PATCH] fix: fix dialogs within dialogs not opening (#1154)

* fix: fix dialogs within dialogs not opening

fixes #1153

* remove console logs
---
 .../components/GenericConfirmationDialog.html |  3 +-
 .../dialog/components/ModalDialog.html        | 18 +++++++----
 tests/spec/032-mute-dialog.js                 | 32 +++++++++++++++++++
 3 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 tests/spec/032-mute-dialog.js

diff --git a/src/routes/_components/dialog/components/GenericConfirmationDialog.html b/src/routes/_components/dialog/components/GenericConfirmationDialog.html
index 0b2980a..eccdff3 100644
--- a/src/routes/_components/dialog/components/GenericConfirmationDialog.html
+++ b/src/routes/_components/dialog/components/GenericConfirmationDialog.html
@@ -43,7 +43,8 @@
     },
     data: () => ({
       positiveText: void 0,
-      negativeText: void 0
+      negativeText: void 0,
+      className: ''
     }),
     methods: {
       show,
diff --git a/src/routes/_components/dialog/components/ModalDialog.html b/src/routes/_components/dialog/components/ModalDialog.html
index aed8309..b312afd 100644
--- a/src/routes/_components/dialog/components/ModalDialog.html
+++ b/src/routes/_components/dialog/components/ModalDialog.html
@@ -217,13 +217,17 @@
         if (otherId !== id) {
           return
         }
-        window.addEventListener('popstate', this.onPopState)
-        this.set({ statePushed: true })
-        window.history.pushState({ modal: id }, null, location.href)
-        document.body.classList.toggle('modal-open', true)
-        this._a11yDialog.show()
-        requestAnimationFrame(() => {
-          this.set({ fadedIn: true })
+        // This setTimeout is dumb, but it fixes issues with modals opening other modals
+        // due to the popstate/pushstate dance.
+        setTimeout(() => {
+          requestAnimationFrame(() => {
+            window.addEventListener('popstate', this.onPopState)
+            this.set({ statePushed: true })
+            window.history.pushState({ modal: id }, null, location.href)
+            document.body.classList.toggle('modal-open', true)
+            this._a11yDialog.show()
+            this.set({ fadedIn: true })
+          })
         })
       },
       onPopState (event) {
diff --git a/tests/spec/032-mute-dialog.js b/tests/spec/032-mute-dialog.js
new file mode 100644
index 0000000..e701324
--- /dev/null
+++ b/tests/spec/032-mute-dialog.js
@@ -0,0 +1,32 @@
+import {
+  getNthDialogOptionsOption,
+  getNthStatus, getNthStatusOptionsButton,
+  modalDialog, sleep, visibleModalDialog
+} from '../utils'
+import { loginAsFoobar } from '../roles'
+
+fixture`032-mute-dialog.js`
+  .page`http://localhost:4002`
+
+test('Can open the mute dialog twice', async t => {
+  await loginAsFoobar(t)
+  await t
+    .expect(getNthStatus(1).exists).ok({ timeout: 30000 })
+    .hover(getNthStatus(1))
+    .click(getNthStatusOptionsButton(1))
+    .click(getNthDialogOptionsOption(3))
+    .expect(visibleModalDialog.innerText).contains('Mute notifications')
+  await sleep(500)
+  await t
+    .pressKey('esc')
+    .expect(modalDialog.exists).notOk()
+  await sleep(500)
+  await t
+    .click(getNthStatusOptionsButton(1))
+    .click(getNthDialogOptionsOption(3))
+    .expect(visibleModalDialog.innerText).contains('Mute notifications')
+  await sleep(500)
+  await t
+    .pressKey('esc')
+    .expect(modalDialog.exists).notOk()
+})