Remove modal from the DOM when it's closed

Author: jcbrand

src/plugins/modal/modal.js

@@ -3,7 +3,7 @@ import Modal from 'bootstrap/js/src/modal.js';
 import { getOpenPromise } from '@converse/openpromise';
 import { Model } from '@converse/skeletor';
 import { CustomElement } from 'shared/components/element.js';
-import { u } from '@converse/headless';
+import { api, u } from '@converse/headless';
 import { modal_close_button } from './templates/buttons.js';
 import tplModal from './templates/modal.js';
 
@@ -50,6 +50,7 @@ class BaseModal extends CustomElement {
         });
         this.addEventListener('hidden.bs.modal', () => {
             this.ariaHidden = 'true';
+            api.modal.remove(this.nodeName.toLowerCase());
         });
     }
 

src/plugins/muc-views/occupant.js

@@ -67,7 +67,7 @@ export default class MUCOccupant extends CustomElement {
     addToContacts() {
         const model = this.model;
         const jid = model.get('jid');
-        if (jid) api.modal.show('converse-add-contact-modal', { 'model': new Model({ jid }) });
+        if (jid) api.modal.show('converse-add-contact-modal', { model: new Model({ jid }) });
     }
 
     /**

src/plugins/muc-views/tests/muc-add-modal.js

@@ -32,7 +32,7 @@ describe('The "Groupchats" Add modal', function () {
     it("doesn't require the domain when muc_domain is set",
         mock.initConverse(['chatBoxesFetched'], { muc_domain: 'muc.example.org' }, async function (_converse) {
 
-            const modal = await mock.openAddMUCModal(_converse);
+            let modal = await mock.openAddMUCModal(_converse);
             expect(modal.querySelector('.modal-title').textContent.trim()).toBe('Enter a new Groupchat');
             spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
             const label_name = modal.querySelector('label[for="chatroom"]');
@@ -51,7 +51,8 @@ describe('The "Groupchats" Add modal', function () {
             // However, you can still open MUCs with different domains
             const roomspanel = _converse.chatboxviews.get('controlbox').querySelector('converse-rooms-list');
             roomspanel.querySelector('.show-add-muc-modal').click();
-            await u.waitUntil(() => u.isVisible(modal), 1000);
+            modal = await u.waitUntil(() => document.querySelector('converse-add-muc-modal'), 1000);
+
             name_input = modal.querySelector('input[name="chatroom"]');
             name_input.value = 'lounge@conference.example.org';
             nick_input = modal.querySelector('input[name="nickname"]');
@@ -69,8 +70,7 @@ describe('The "Groupchats" Add modal', function () {
     it('uses the muc_domain if locked_muc_domain is true', mock.initConverse(
         ['chatBoxesFetched'], { muc_domain: 'muc.example.org', locked_muc_domain: true },
         async function (_converse) {
-            const modal = await mock.openAddMUCModal(_converse);
-
+            let modal = await mock.openAddMUCModal(_converse);
             expect(modal.querySelector('.modal-title').textContent.trim()).toBe('Enter a new Groupchat');
             spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
             const label_name = modal.querySelector('label[for="chatroom"]');
@@ -89,7 +89,7 @@ describe('The "Groupchats" Add modal', function () {
             // However, you can still open MUCs with different domains
             const roomspanel = _converse.chatboxviews.get('controlbox').querySelector('converse-rooms-list');
             roomspanel.querySelector('.show-add-muc-modal').click();
-            await u.waitUntil(() => u.isVisible(modal), 1000);
+            modal = await u.waitUntil(() => document.querySelector('converse-add-muc-modal'));
             name_input = modal.querySelector('input[name="chatroom"]');
             name_input.value = 'lounge@conference';
             nick_input = modal.querySelector('input[name="nickname"]');

src/shared/modals/tests/user-details-modal.js

@@ -122,8 +122,8 @@ describe('The User Details Modal', function () {
             show_modal_button.click();
             await u.waitUntil(() => u.isVisible(modal), 2000);
 
-            remove_contact_button = modal.querySelector('button.remove-contact');
-            expect(u.isVisible(remove_contact_button)).toBeTruthy();
+            modal.querySelector('#edit-tab').click();
+            await u.waitUntil(() => u.isVisible(modal.querySelector('button.remove-contact')));
         })
     );