From 10df1fb4b793dfa0d6d477c3c271c8912ae983d4 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Wed, 3 Jul 2024 02:58:41 +0000
Subject: [PATCH] fix: menu in peek view content not scrollable issue (#7412)

when using [dialog.overlay](https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/Dialog.tsx#L203-L211
), whole app is affected by [react-scroll library](https://github.com/theKashey/react-remove-scroll/blob/8923c513d269190162eb4678c1b80137f5998679/src/SideEffect.tsx#L131-L134
):

In the current implementation, only the contents in the dialog content will be scrollable and cannot be configured in current API.

This PR introduces a simple div overlay to get rid of this issue.

fix BS-696
---
 .../src/modules/peek-view/view/modal-container.css.ts  |  1 +
 .../src/modules/peek-view/view/modal-container.tsx     | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts b/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
index c5afe1ab9..a2d144954 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts
@@ -100,6 +100,7 @@ export const modalOverlay = style({
   zIndex: cssVar('zIndexModal'),
   backgroundColor: cssVar('black30'),
   viewTransitionName: vtOverlayFade,
+  pointerEvents: 'auto',
 });
 
 export const modalContentWrapper = style({
diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
index ec036d89e..347c13f2d 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
@@ -18,7 +18,11 @@ const contentOptions: Dialog.DialogContentProps = {
   ['data-testid' as string]: 'peek-view-modal',
   onPointerDownOutside: e => {
     const el = e.target as HTMLElement;
-    if (el.closest('[data-peek-view-wrapper]')) {
+    if (
+      el.closest('[data-peek-view-wrapper]') ||
+      // workaround for slash menu click outside issue
+      el.closest('affine-slash-menu')
+    ) {
       e.preventDefault();
     }
   },
@@ -83,6 +87,8 @@ export type PeekViewModalContainerProps = PropsWithChildren<{
   testId?: string;
 }>;
 
+const PeekViewModalOverlay = 'div';
+
 export const PeekViewModalContainer = forwardRef<
   HTMLDivElement,
   PeekViewModalContainerProps
@@ -149,7 +155,7 @@ export const PeekViewModalContainer = forwardRef<
     <PeekViewContext.Provider value={emptyContext}>
       <Dialog.Root modal open={vtOpen} onOpenChange={onOpenChange}>
         <Dialog.Portal>
-          <Dialog.Overlay
+          <PeekViewModalOverlay
             className={styles.modalOverlay}
             onAnimationStart={onAnimationStart}
             onAnimationEnd={onAnimateEnd}