Fixes #3510

CHANGES.md

@@ -34,6 +34,7 @@
 - #3386: Registration form is not fetched
 - #3476: better UI for form "fixed" fields
 - #3478: MUC participant status indicator misplaced 
+- #3510: MUC's configuration panel loads endlessly, if it's the second one you want to configure 
 - #3529: Unbookmarked channels no longer change their name when clicked with an unread indicator (or text icon)
 - #3579: Changing nickname in a groupchat once, forbids to change nickname in another groupchat afterwards
 - #3589: Hats namespace change

src/plugins/modal/modal.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { getOpenPromise } from '@converse/openpromise';
+import { Model} from '@converse/skeletor';
 import { Modal } from "bootstrap";
 import { CustomElement } from 'shared/components/element.js';
 import { u } from '@converse/headless';
@@ -13,6 +14,12 @@ class BaseModal extends CustomElement {
      * @typedef {import('lit').TemplateResult} TemplateResult
      */
 
+    static get properties () {
+        return {
+            model: { type: Model },
+        }
+    }
+
     /** @type {Modal} */
     #modal;
 

src/plugins/muc-views/modals/config.js

@@ -18,6 +18,10 @@ export default class MUCConfigModal extends BaseModal {
 
     initialize () {
         super.initialize();
+        this.addListeners();
+    }
+
+    addListeners () {
         this.listenTo(this.model, 'change', () => this.requestUpdate());
         this.listenTo(this.model.features, 'change:passwordprotected', () => this.requestUpdate());
         this.listenTo(this.model.session, 'change:config_stanza', () => this.requestUpdate());
@@ -27,9 +31,16 @@ export default class MUCConfigModal extends BaseModal {
         return tplMUCConfigForm(this);
     }
 
-    connectedCallback () {
-        super.connectedCallback();
-        this.getConfig();
+    /**
+     * @param {Map<string, any>} changed
+     */
+    shouldUpdate(changed) {
+        if (changed.has('model') && this.model) {
+            this.stopListening();
+            this.addListeners();
+            this.getConfig();
+        }
+        return true;
     }
 
     getModalTitle () {

src/types/plugins/modal/modal.d.ts

@@ -1,5 +1,13 @@
 export default BaseModal;
 declare class BaseModal extends CustomElement {
+    /**
+     * @typedef {import('lit').TemplateResult} TemplateResult
+     */
+    static get properties(): {
+        model: {
+            type: typeof Model;
+        };
+    };
     /**
      * @param {Object} options
      */
@@ -11,28 +19,16 @@ declare class BaseModal extends CustomElement {
     /**
      * @returns {TemplateResult|string}
      */
-    renderModal(): {
-        _$litType$: 1 | 2;
-        strings: TemplateStringsArray;
-        values: unknown[];
-    } | string;
+    renderModal(): import("lit").TemplateResult<1 | 2> | string;
     /**
      * @returns {TemplateResult|string}
      */
-    renderModalFooter(): {
-        _$litType$: 1 | 2;
-        strings: TemplateStringsArray;
-        values: unknown[];
-    } | string;
+    renderModalFooter(): import("lit").TemplateResult<1 | 2> | string;
     render(): import("lit").TemplateResult<1>;
     /**
      * @returns {string|TemplateResult}
      */
-    getModalTitle(): string | {
-        _$litType$: 1 | 2;
-        strings: TemplateStringsArray;
-        values: unknown[];
-    };
+    getModalTitle(): string | import("lit").TemplateResult<1 | 2>;
     /**
      * @param {Event} [ev]
      */
@@ -50,4 +46,5 @@ declare class BaseModal extends CustomElement {
 }
 import { CustomElement } from 'shared/components/element.js';
 import { Modal } from "bootstrap";
+import { Model } from '@converse/skeletor';
 //# sourceMappingURL=modal.d.ts.map

src/types/plugins/muc-views/modals/config.d.ts

@@ -3,8 +3,12 @@ export default class MUCConfigModal extends BaseModal {
      * @typedef {import('@converse/headless/types/plugins/vcard/api').VCardData} VCardData
      */
     constructor(options: any);
+    addListeners(): void;
     renderModal(): import("lit").TemplateResult<1>;
-    connectedCallback(): void;
+    /**
+     * @param {Map<string, any>} changed
+     */
+    shouldUpdate(changed: Map<string, any>): boolean;
     getModalTitle(): any;
     getConfig(): Promise<void>;
     /**