From 0649eee36617900c03ade3a87ffb9637bdf4bf7a Mon Sep 17 00:00:00 2001 From: Nolan Lawson 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 0b2980ac..eccdff36 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 aed8309f..b312afd7 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 00000000..e7013243 --- /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() +})