[bug]: long press image in dialog with modal mode in PWA, context menu doesn't show

[ranlix]

Describe the bug

Long press image in dialog may not trigger image's context menu to save to photo library.

Affected component/components

Dialog, Image

How to reproduce

1. create a next pwa app;

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import Image from "next/image"

export default function Home() {
  const [open, setOpen] = useState(false)

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4">
      <h1 className="mb-8 text-3xl font-bold">Next.js PWA Example</h1>

    <div className="relative bg-indigo-500 w-[300px] h-[200px] mx-auto mb-10">
      <Image
          src="/placeholder.svg?height=400&width=600"
          alt="Example image"
          fill
          className="object-cover w-full h-full"
          priority
        />
    </div>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button size="lg">Open Image Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Image Preview</DialogTitle>
            <DialogDescription>This is an example image in a dialog for our PWA.</DialogDescription>
          </DialogHeader>
          <div className="relative aspect-video overflow-hidden rounded-lg">
            <Image
              src="/placeholder.svg?height=400&width=600"
              alt="Example image"
              fill
              className="object-cover"
              priority
            />
          </div>
        </DialogContent>
      </Dialog>

      <p className="mt-8 text-center text-sm text-muted-foreground">
        This is a Progressive Web App. You can install it on your device!
      </p>
    </main>
  )
}

2. visit demo URL
3. Add to home screen;
4. Open PWA;
5. Long Press the image in dialog

Codesandbox/StackBlitz link

https://v0-next-js-pwa-dialog.vercel.app/

Logs

System Info

MacOS(Version 14.2.1)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[ranlix]

An interesting find, is set modal={false}for Dialog, and add below props to DialogContent

onPointerDownOutside={(e) => e.preventDefault()}
onInteractOutside={(e) => e.preventDefault()}

Updated demo code

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import Image from "next/image"

export default function Home() {
  const [open, setOpen] = useState(false)
  const [open2, setOpen2] = useState(false)

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4">
      <h1 className="mb-8 text-3xl font-bold">Next.js PWA Example</h1>

    <div className="relative bg-indigo-500 w-[300px] h-[200px] mx-auto mb-10">
      <Image
          src="/placeholder.svg?height=400&width=600"
          alt="Example image"
          fill
          className="object-cover w-full h-full"
          priority
        />
    </div>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button size="lg">Open Image Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Image Preview</DialogTitle>
            <DialogDescription>This is an example image in a dialog for our PWA.</DialogDescription>
          </DialogHeader>
          <div className="relative aspect-video overflow-hidden rounded-lg">
            <Image
              src="/placeholder.svg?height=400&width=600"
              alt="Example image"
              fill
              className="object-cover"
              priority
            />
          </div>
        </DialogContent>
      </Dialog>
      <div className="mb-4"></div>
      
      <Dialog open={open2} onOpenChange={setOpen2} modal={false}>
        <DialogTrigger asChild>
          <Button size="lg">Open Image Dialog with "modal=false"</Button>
        </DialogTrigger>
        <DialogContent
          className="sm:max-w-md"
          onPointerDownOutside={(e) => e.preventDefault()}
          onInteractOutside={(e) => e.preventDefault()}
        >
          <DialogHeader>
            <DialogTitle>Image Preview without modal mode</DialogTitle>
            <DialogDescription>This is an example image in a dialog without modal mode.</DialogDescription>
          </DialogHeader>
          <div className="relative aspect-video overflow-hidden rounded-lg">
            <Image
              src="/placeholder.svg?height=400&width=600"
              alt="Example image"
              fill
              className="object-cover"
              priority
            />
          </div>
        </DialogContent>
      </Dialog>

      <p className="mt-8 text-center text-sm text-muted-foreground">
        This is a Progressive Web App. You can install it on your device!
      </p>
    </main>
  )
}

You could easily long press image in 2nd dialog to save it picture library with context menu.
So may be the dialog overlay make this bug?