github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-25 09:41:49 +08:00
Code Issues Actions 46 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 a55b61e058
commit b7f2fe2429
No known key found for this signature in database
GPG Key ID: C4E3BBF9C3412B4C
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
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 { view(vnode: Mithril.VnodeDOM<IModalManagerAttrs, this>): Mithril.Children {
const modal = this.attrs.state.modal; const modal = this.attrs.state.modal;
const Tag = modal?.componentClass;
return ( return (
<div className="ModalManager modal fade"> <div className="ModalManager modal fade">
{!!modal && {!!Tag && (
modal.componentClass.component({ <Tag
...modal.attrs, key={modal?.key}
animateShow: this.animateShow.bind(this), {...modal.attrs}
animateHide: this.animateHide.bind(this), animateShow={this.animateShow.bind(this)}
state: this.attrs.state, animateHide={this.animateHide.bind(this)}
})} state={this.attrs.state}
/>
)}
</div> </div>
); );
} }

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

@ -22,8 +22,15 @@ export default class ModalManagerState {
modal: null | { modal: null | {
componentClass: UnsafeModalClass; componentClass: UnsafeModalClass;
attrs?: Record<string, unknown>; attrs?: Record<string, unknown>;
key: number;
} = null; } = 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; private closeTimeout?: NodeJS.Timeout;
/** /**
@ -48,7 +55,7 @@ export default class ModalManagerState {
if (this.closeTimeout) clearTimeout(this.closeTimeout); if (this.closeTimeout) clearTimeout(this.closeTimeout);
this.modal = { componentClass, attrs }; this.modal = { componentClass, attrs, key: this.key++ };
m.redraw.sync(); m.redraw.sync();
} }