diff options
| author | Plastikmensch <Plastikmensch@users.noreply.github.com> | 2023-01-04 11:59:43 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-01-04 11:59:43 +0100 |
| commit | 910d2d9f6b31f926bdc95c3e95323abccb0996f6 (patch) | |
| tree | 93f824fdf847a2802230f32191bf9ccfefebda48 | |
| parent | de67b567adcde3fcf7827e09e15a05b81a59c897 (diff) | |
Prevent doodle from closing on outside click (#2047)
Adds a new property to the dispatch, which when set to true, replaces the onClose handler with a no-op, preventing the modal from closing. Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com> Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
| -rw-r--r-- | app/javascript/flavours/glitch/features/compose/containers/options_container.js | 2 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/modal_root.js | 5 |
2 files changed, 5 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/containers/options_container.js b/app/javascript/flavours/glitch/features/compose/containers/options_container.js index 6c3db8173..5de9f5419 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/options_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/options_container.js @@ -46,7 +46,7 @@ const mapDispatchToProps = (dispatch) => ({ }, onDoodleOpen() { - dispatch(openModal('DOODLE', { noEsc: true })); + dispatch(openModal('DOODLE', { noEsc: true, noClose: true })); }, }); diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index d2ee28948..379f57cbb 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -116,13 +116,16 @@ export default class ModalRoot extends React.PureComponent { this._modal = c; } + // prevent closing of modal when clicking the overlay + noop = () => {} + render () { const { type, props, ignoreFocus } = this.props; const { backgroundColor } = this.state; const visible = !!type; return ( - <Base backgroundColor={backgroundColor} onClose={this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}> + <Base backgroundColor={backgroundColor} onClose={props && props.noClose ? this.noop : this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}> {visible && ( <> <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}> |