From 910d2d9f6b31f926bdc95c3e95323abccb0996f6 Mon Sep 17 00:00:00 2001
From: Plastikmensch <Plastikmensch@users.noreply.github.com>
Date: Wed, 4 Jan 2023 11:59:43 +0100
Subject: [PATCH] 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>
---
 .../glitch/features/compose/containers/options_container.js  | 2 +-
 .../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 6c3db8173d..5de9f5419d 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 d2ee289488..379f57cbbe 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}>