github-mirror/framework
github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-24 00:15:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix consecutive shows of same modal with different attrs

Browse Source 
We need to specify a unique key for each modal so that the modals are fully destroyed and recreated. For instance, this fixes the signup modal being empty with OAuth register flows.
This commit is contained in:
Alexander Skvortsov 2021-12-27 18:28:11 -05:00
parent c939b4f274
commit f6b1d65a57
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
framework/core/js/src/common/components/ModalManager.tsx
View File

@ -24,16 +24,19 @@ export default class ModalManager extends Component<IModalManagerAttrs> {
view(vnode: Mithril.VnodeDOM<IModalManagerAttrs, this>): Mithril.Children {
const modal = this.attrs.state.modal;
const Tag = modal?.componentClass;
return (
<div className="ModalManager modal fade">
{!!modal &&
modal.componentClass.component({
...modal.attrs,
animateShow: this.animateShow.bind(this),
animateHide: this.animateHide.bind(this),
state: this.attrs.state,
})}
{!!Tag && (
<Tag
key={modal?.key}
{...modal.attrs}
animateShow={this.animateShow.bind(this)}
animateHide={this.animateHide.bind(this)}
state={this.attrs.state}
/>
)}
</div>
);
}

9
framework/core/js/src/common/states/ModalManagerState.ts
View File

@ -22,8 +22,15 @@ export default class ModalManagerState {
modal: null | {
componentClass: UnsafeModalClass;
attrs?: Record<string, unknown>;
key: number;
} = null;
/**
* Used to force re-initialization of modals if a modal
* is replaced by another of the same type.
*/
private key = 0;
private closeTimeout?: NodeJS.Timeout;
/**
@ -48,7 +55,7 @@ export default class ModalManagerState {
if (this.closeTimeout) clearTimeout(this.closeTimeout);
this.modal = { componentClass, attrs };
this.modal = { componentClass, attrs, key: this.key++ };
m.redraw.sync();
}