Modals launching other Modals no longer work

[germain-gg]

[aaronraimist]

also if you try to reproduce this, the sign out button will stop working until you refresh the page

[HarHarLinks]

related or not related, but also happened to me here: #17593 (comment)

[t3chguy]

Regressed by matrix-org/matrix-react-sdk#6185

Actually this looks related to the React 17 upgrade

[t3chguy]

So I think we're hitting some race inside the guts of React.
If I add a setImmediate on the ReactDOM.render call or I set up a breakpoint then it works fine.

Index: src/Modal.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/Modal.tsx	(revision 54c3832b5b9dde5981eb1934f599e7b75eac00e8)
+++ src/Modal.tsx	(date 1624303471241)
@@ -385,7 +385,7 @@
                 </div>
             );
 
-            ReactDOM.render(dialog, ModalManager.getOrCreateContainer());
+            setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));
         } else {
             // This is safe to call repeatedly if we happen to do that
             ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());

Not sure what the best way to proceed is here

This probably affects other modals which open other modals so marking as Major

Yup, just found that the Keywords modal doesn't work either, this one has an error though:

Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.

Both appear to be fixed by the setImmediate

[t3chguy]

Actually the keywords modal was only broken because I attempted to visit send debug logs. So this looks to affect non-priority non-static modals when one closes itself and then opens another in the very same tick.