Fix ModalManager reRender racing with itself (#7027)

This commit is contained in:
Michael Telatynski 2021-10-25 12:37:59 +01:00 committed by GitHub
parent 64c3f0a9b1
commit 87dc2e8141
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 19 deletions

View file

@ -18,7 +18,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import classNames from 'classnames'; import classNames from 'classnames';
import { defer } from "matrix-js-sdk/src/utils"; import { defer, sleep } from "matrix-js-sdk/src/utils";
import Analytics from './Analytics'; import Analytics from './Analytics';
import dis from './dispatcher/dispatcher'; import dis from './dispatcher/dispatcher';
@ -332,7 +332,10 @@ export class ModalManager {
return this.priorityModal ? this.priorityModal : (this.modals[0] || this.staticModal); return this.priorityModal ? this.priorityModal : (this.modals[0] || this.staticModal);
} }
private reRender() { private async reRender() {
// await next tick because sometimes ReactDOM can race with itself and cause the modal to wrongly stick around
await sleep(0);
if (this.modals.length === 0 && !this.priorityModal && !this.staticModal) { if (this.modals.length === 0 && !this.priorityModal && !this.staticModal) {
// If there is no modal to render, make all of Element available // If there is no modal to render, make all of Element available
// to screen reader users again // to screen reader users again

View file

@ -181,7 +181,7 @@ export async function startTermsFlow(
return Promise.all(agreePromises); return Promise.all(agreePromises);
} }
export function dialogTermsInteractionCallback( export async function dialogTermsInteractionCallback(
policiesAndServicePairs: { policiesAndServicePairs: {
service: Service; service: Service;
policies: { [policy: string]: Policy }; policies: { [policy: string]: Policy };
@ -189,21 +189,18 @@ export function dialogTermsInteractionCallback(
agreedUrls: string[], agreedUrls: string[],
extraClassNames?: string, extraClassNames?: string,
): Promise<string[]> { ): Promise<string[]> {
return new Promise((resolve, reject) => { logger.log("Terms that need agreement", policiesAndServicePairs);
logger.log("Terms that need agreement", policiesAndServicePairs); // FIXME: Using an import will result in test failures
// FIXME: Using an import will result in test failures const TermsDialog = sdk.getComponent("views.dialogs.TermsDialog");
const TermsDialog = sdk.getComponent("views.dialogs.TermsDialog");
Modal.createTrackedDialog('Terms of Service', '', TermsDialog, { const { finished } = Modal.createTrackedDialog<[boolean, string[]]>('Terms of Service', '', TermsDialog, {
policiesAndServicePairs, policiesAndServicePairs,
agreedUrls, agreedUrls,
onFinished: (done, agreedUrls) => { }, classNames("mx_TermsDialog", extraClassNames));
if (!done) {
reject(new TermsNotSignedError()); const [done, _agreedUrls] = await finished;
return; if (!done) {
} throw new TermsNotSignedError();
resolve(agreedUrls); }
}, return _agreedUrls;
}, classNames("mx_TermsDialog", extraClassNames));
});
} }