mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-20 03:26:47 +08:00
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
This commit is contained in:
@@ -100,6 +100,7 @@ export const modalOverlay = style({
|
||||
zIndex: cssVar('zIndexModal'),
|
||||
backgroundColor: cssVar('black30'),
|
||||
viewTransitionName: vtOverlayFade,
|
||||
pointerEvents: 'auto',
|
||||
});
|
||||
|
||||
export const modalContentWrapper = style({
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user