Browse Source

fix zap modality

imwald
Silberengel 3 weeks ago
parent
commit
ac42e352a2
  1. 3
      src/PageManager.tsx
  2. 16
      src/components/NoteDrawer/index.tsx
  3. 33
      src/lib/sheet-dismiss-guard.ts

3
src/PageManager.tsx

@ -6,6 +6,7 @@ import { RefreshButton } from '@/components/RefreshButton' @@ -6,6 +6,7 @@ import { RefreshButton } from '@/components/RefreshButton'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import logger from '@/lib/logger'
import { preventRadixSheetCloseForPortaledOverlay } from '@/lib/sheet-dismiss-guard'
import { ChevronLeft } from 'lucide-react'
import { NavigationService } from '@/services/navigation.service'
// Page imports needed for primary note view
@ -2254,6 +2255,8 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) { @@ -2254,6 +2255,8 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
side="right"
className="w-full sm:max-w-[1042px] overflow-y-auto p-0"
hideClose
onPointerDownOutside={(e) => preventRadixSheetCloseForPortaledOverlay(e)}
onInteractOutside={(e) => preventRadixSheetCloseForPortaledOverlay(e)}
>
<div className="h-full">
{secondaryStack.map((item, index) => {

16
src/components/NoteDrawer/index.tsx

@ -1,4 +1,5 @@ @@ -1,4 +1,5 @@
import { useState, useEffect, useRef } from 'react'
import { preventRadixSheetCloseForPortaledOverlay } from '@/lib/sheet-dismiss-guard'
import { Sheet, SheetContent } from '@/components/ui/sheet'
import NotePage from '@/pages/secondary/NotePage'
import { useSecondaryPage } from '@/PageManager'
@ -53,19 +54,8 @@ export default function NoteDrawer({ open, onOpenChange, noteId, initialEvent }: @@ -53,19 +54,8 @@ export default function NoteDrawer({ open, onOpenChange, noteId, initialEvent }:
side="right"
className="w-full sm:max-w-[1042px] overflow-y-auto p-0"
hideClose
onPointerDownOutside={(e) => {
// Prevent the drawer from closing when the user interacts with a lightbox portal.
// The lightbox renders into document.body (outside the Sheet DOM) so Radix UI
// would otherwise treat every click inside the lightbox as "outside" the drawer.
if (document.body.classList.contains('yarl__no_scroll')) {
e.preventDefault()
}
}}
onInteractOutside={(e) => {
if (document.body.classList.contains('yarl__no_scroll')) {
e.preventDefault()
}
}}
onPointerDownOutside={(e) => preventRadixSheetCloseForPortaledOverlay(e)}
onInteractOutside={(e) => preventRadixSheetCloseForPortaledOverlay(e)}
>
<div className="min-h-full">
<NotePage

33
src/lib/sheet-dismiss-guard.ts

@ -0,0 +1,33 @@ @@ -0,0 +1,33 @@
/**
* Radix Sheet closes on outside pointer/focus. Full-page portals on `document.body`
* (lightbox, Bitcoin Connect `bc-modal`) sit outside the Sheet DOM, so Radix treats
* interactions there as "dismiss sheet" unless we call {@link preventDefault}.
*/
type RadixOutsideEvent = {
preventDefault: () => void
detail?: { originalEvent?: Event }
}
function eventComposedPath(e: RadixOutsideEvent): EventTarget[] {
const orig = e.detail?.originalEvent
if (orig && typeof orig.composedPath === 'function') {
return orig.composedPath()
}
return []
}
export function preventRadixSheetCloseForPortaledOverlay(e: RadixOutsideEvent): void {
if (typeof document === 'undefined') return
if (document.body.classList.contains('yarl__no_scroll')) {
e.preventDefault()
return
}
const path = eventComposedPath(e)
const inBitcoinConnectModal = path.some(
(node) => node instanceof HTMLElement && node.tagName.toLowerCase() === 'bc-modal'
)
if (inBitcoinConnectModal) {
e.preventDefault()
}
}
Loading…
Cancel
Save