fix: prevent dismiss when select text

Signed-off-by: Innei <[email protected]>
Innei · Sep 11, 2024 · e6b4b20 · e6b4b20
1 parent b21ce97
commit e6b4b20
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -132,5 +132,6 @@
     "framer-motion": "^11.2.11",
     "tailwind-merge": "^2.3.0",
     "vaul": "^0.9.1"
-  }
+  },
+  "packageManager": "[email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }
diff --git a/src/modal/modal.tsx b/src/modal/modal.tsx
@@ -80,6 +80,7 @@ export const Modal: Component<{
         () => ({ zIndex: MODAL_STACK_Z_INDEX + index + 1 }),
         [index],
       )
+
       const modalStack = useModalStackInternal()
       const currentIsClosing = modalStack.every((modal) => modal.id !== item.id)
 
@@ -158,6 +159,29 @@ export const Modal: Component<{
         </CurrentModalContext.Provider>
       )
 
+      const isSelectingRef = useRef(false)
+      const handleSelectStart = useCallback(() => {
+        isSelectingRef.current = true
+      }, [])
+      const handleDetectSelectEnd = useCallback(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            if (isSelectingRef.current) {
+              isSelectingRef.current = false
+            }
+          })
+        })
+      }, [])
+
+      const handleClickOutsideToDismiss = useCallback(
+        (e: SyntheticEvent) => {
+          if (isSelectingRef.current) return
+          const fn = clickOutsideToDismiss ? dismiss : noticeModal
+          fn?.(e)
+        },
+        [clickOutsideToDismiss, dismiss, noticeModal],
+      )
+
       useEffect(() => {
         if (currentIsClosing) {
           // Radix dialog will block pointer events
@@ -232,9 +256,15 @@ export const Modal: Component<{
                       currentIsClosing && 'pointer-events-none',
                       modalContainerClassName,
                     )}
-                    onClick={clickOutsideToDismiss ? dismiss : undefined}
+                    onClick={handleClickOutsideToDismiss}
+                    onPointerUp={handleDetectSelectEnd}
                   >
-                    <div className="contents" onClick={stopPropagation}>
+                    <div
+                      className="contents"
+                      onClick={stopPropagation}
+                      onSelect={handleSelectStart}
+                      onKeyUp={handleSelectStart}
+                    >
                       <CustomModalComponent>
                         {finalChildren}
                       </CustomModalComponent>
@@ -259,7 +289,8 @@ export const Modal: Component<{
                     currentIsClosing && 'pointer-events-none',
                     modalContainerClassName,
                   )}
-                  onClick={clickOutsideToDismiss ? dismiss : noticeModal}
+                  onClick={handleClickOutsideToDismiss}
+                  onPointerUp={handleDetectSelectEnd}
                   style={zIndexStyle}
                 >
                   <m.div
@@ -282,6 +313,8 @@ export const Modal: Component<{
                       modalClassName,
                     )}
                     onClick={stopPropagation}
+                    onSelect={handleSelectStart}
+                    onKeyUp={handleSelectStart}
                     drag
                     dragControls={dragController}
                     dragElastic={0}