Allow to cancel the popovers by clicking away

niuware · Jun 3, 2020 · 82e6366 · 82e6366
1 parent fafa072
commit 82e6366
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
@@ -689,6 +689,10 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         confirmLink(...args)
     }
 
+    const handleClosePrompt = () => {
+        setState({ ...state, anchorUrlPopover: undefined })
+    }
+
     const handleToolbarClick = (style: string, type: string, id: string, inlineMode?: boolean) => {
         if (type === "inline") {
             return toggleInlineStyle(style)
@@ -748,10 +752,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                 removeLink()
                 return
             }
-            setState({
-                ...state,
-                anchorUrlPopover: undefined
-            })
+            handleClosePrompt()
             return
         }
 
@@ -792,10 +793,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
             if (urlKey) {
                 removeMedia()
             }
-            setState({
-                ...state,
-                anchorUrlPopover: undefined
-            })
+            handleClosePrompt()
             return
         }
 
@@ -1062,6 +1060,7 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
                         data={state.urlData}
                         anchor={state.anchorUrlPopover}
                         onConfirm={handleConfirmPrompt}
+                        onCancel={handleClosePrompt}
                         isMedia={state.urlIsMedia}
                     />
                     : null}

diff --git a/src/components/UrlPopover.tsx b/src/components/UrlPopover.tsx
@@ -30,6 +30,7 @@ interface IUrlPopoverStateProps extends WithStyles<typeof styles> {
     data?: TUrlData
     isMedia?: boolean
     onConfirm: (isMedia?: boolean, ...args: any) => void
+    onCancel: () => void
 }
 
 const styles = ({ spacing }: Theme) => createStyles({
@@ -68,6 +69,7 @@ const UrlPopover: FunctionComponent<IUrlPopoverStateProps> = (props) => {
     return (
         <Popover
             open={props.anchor !== undefined}
+            onClose={props.onCancel}
             anchorEl={props.anchor}
             anchorOrigin={{
                 vertical: "bottom",