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>

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 }));
   },
 });
 

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}>