fix(button propagation): stop the submit button propagation and close…

… the link popover when applying (close #99)
hunghg255 · Nov 6, 2024 · ba80307 · ba80307
1 parent d1ee3e1
commit ba80307
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/src/extensions/Image/components/ActionImageButton.tsx b/src/extensions/Image/components/ActionImageButton.tsx
@@ -40,6 +40,7 @@ function ActionImageButton(props: any) {
   }
   function handleLink(e: any) {
     e.preventDefault()
+    e.stopPropagation()
 
     props.editor.chain().focus().setImageInline({ src: link, inline: imageInline }).run()
     actionDialogImage.setOpen(false)

diff --git a/src/extensions/Link/components/LinkEditBlock.tsx b/src/extensions/Link/components/LinkEditBlock.tsx
@@ -33,6 +33,7 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
 
   function handleSubmit(event: any) {
     event.preventDefault()
+    event.stopPropagation()
     props?.onSetLink(form.link, form.text, openInNewTab)
   }
 

diff --git a/src/extensions/Link/components/LinkEditPopover.tsx b/src/extensions/Link/components/LinkEditPopover.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { ActionButton, IconComponent, Popover, PopoverContent, PopoverTrigger } from '@/components'
 import LinkEditBlock from '@/extensions/Link/components/LinkEditBlock'
 import type { ButtonViewReturnComponentProps } from '@/types'
@@ -14,14 +16,17 @@ interface IPropsLinkEditPopover {
 }
 
 function LinkEditPopover(props: IPropsLinkEditPopover) {
+  const [open, setOpen] = useState(false)
+
   function onSetLink(link: string, text?: string, openInNewTab?: boolean) {
     if (props.action) {
       props.action({ link, text, openInNewTab })
+      setOpen(false)
     }
   }
 
   return (
-    <Popover modal>
+    <Popover modal open={open} onOpenChange={setOpen}>
       <PopoverTrigger disabled={props?.disabled} asChild>
         <ActionButton
           tooltip={props?.tooltip}

diff --git a/src/extensions/Video/components/ActiveVideoButton.tsx b/src/extensions/Video/components/ActiveVideoButton.tsx
@@ -43,6 +43,7 @@ function ActionVideoButton(props: any) {
   }
   function handleLink(e: any) {
     e.preventDefault()
+    e.stopPropagation()
 
     props.editor
       .chain()