[Bug]: Context Menu not opening on iOS

[TomHart]

Describe the bug

On Android and in the browser the ContextMenu is opening, but on iOS devices is isn't.

Affected component/components

ContextMenu

How to reproduce

<ContextMenu>
            <ContextMenuTrigger className={'select-none'}>
                <InnerBookCard book={book} aspectRatio={aspectRatio} width={width} height={height}
                               className={className} saving={saving} {...props} />
            </ContextMenuTrigger>
            <ContextMenuContent className="w-64">
                <ContextMenuItem inset onSelect={() => router.push(`/edit-book/${book.id}`)}>
                    Edit
                </ContextMenuItem>
                <ContextMenuItem inset onSelect={() => router.push(`/custom-photo/${book.id}`)}>
                    Custom Photo
                </ContextMenuItem>
                <ContextMenuItem inset onSelect={() => markBookAction(BookStatus.STARTED)}
                                 disabled={(!!book.startedAt && !book.finishedAt)}>
                    Mark as started
                </ContextMenuItem>
                <ContextMenuItem inset onSelect={() => markBookAction(BookStatus.READ)}
                                 disabled={(!!book.startedAt && !!book.finishedAt)}>
                    Mark as finished
                </ContextMenuItem>
                <ContextMenuItem inset onSelect={() => markBookAction(BookStatus.UNREAD)}
                                 disabled={(!book.startedAt && !book.finishedAt)}>
                    Revert to not started
                </ContextMenuItem>
            </ContextMenuContent>
        </ContextMenu>

InnerBookCard

<div className={cn("space-y-3", className)} {...props}>

            <div ref={boxRef}
                 className="overflow-hidden rounded-md border-2 border-[#0000] [background:padding-box_var(--bg-color),border-box_var(--border-color)]"
                 style={
                     saving ? {
                         "--angle": "0deg",
                         "--border-color": "linear-gradient(var(--angle), #070707, #687aff)",
                         "--bg-color": "linear-gradient(#131219, #131219)",
                     } as CSSProperties : {}
                 }>

                {imgLoading ?
                    <Skeleton className={cn(
                        "h-auto w-auto object-cover transition-all hover:scale-105",
                        aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square",
                        `w-[${width}px] h-[${height}px]`
                    )}/> : null}

                <Image
                    src={src}
                    alt={`${book.title} (${book.isbn})`}
                    width={width}
                    height={height}
                    onError={() => {
                        setSrc('/404-book.png')
                    }}
                    onLoad={() => setImgLoading(false)}
                    className={cn(
                        "h-auto w-full object-cover transition-all hover:scale-105",
                        aspectRatio === "portrait" ? "" : "aspect-square",
                        imgLoading ? "opacity-0 h-0" : "",
                    )}
                />
            </div>

            <div className="space-y-1 text-sm">
                <Badge className={cn(
                    bookStatus(book) === BookStatus.UNREAD ? 'hover:bg-blue-500 bg-blue-500' : '',
                    bookStatus(book) === BookStatus.STARTED ? 'hover:bg-yellow-300 bg-yellow-300 text-gray-900' : '',
                    bookStatus(book) === BookStatus.READ ? 'hover:bg-green-800 bg-green-800' : '',
                )}>
                    {!book.startedAt ? 'Unread' : !book.finishedAt ? 'Reading' : 'Read'}
                </Badge>
                <h3 className="font-sm leading-none py-[4px]">{book.title}</h3>
                <p className="text-xs text-muted-foreground">{book.author?.name}</p>
                <DateStat text='Started' date={book.startedAt}/>
                <DateStat text='Finished' date={book.finishedAt}/>
            </div>
        </div>

Full Rendered HTML

<span data-state="closed" class="select-none">
   <div class="space-y-3 w-[150px]">
      <div class="overflow-hidden rounded-md border-2 border-[#0000] [background:padding-box_var(--bg-color),border-box_var(--border-color)]" style="--angle: NaNdeg;"><img alt="Hook, Line, and Sinker (9780063045699)" loading="lazy" width="150" height="150" decoding="async" data-nimg="1" class="h-auto w-full object-cover transition-all hover:scale-105" style="color: transparent;" srcset="/_next/image?url=https%3A%2F%2Fcdn.waterstones.com%2Fbookjackets%2Flarge%2F9780%2F0630%2F9780063045699.jpg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fcdn.waterstones.com%2Fbookjackets%2Flarge%2F9780%2F0630%2F9780063045699.jpg&amp;w=384&amp;q=75 2x" src="https://localhost:3000/_next/image?url=https%3A%2F%2Fcdn.waterstones.com%2Fbookjackets%2Flarge%2F9780%2F0630%2F9780063045699.jpg&amp;w=384&amp;q=75"></div>
      <div class="space-y-1 text-sm">
         <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-primary-foreground shadow hover:bg-blue-500 bg-blue-500">Unread</div>
         <h3 class="font-sm leading-none py-[4px]">Hook, Line, and Sinker</h3>
         <p class="text-xs text-muted-foreground">Tessa Bailey</p>
      </div>
   </div>
</span>

Codesandbox/StackBlitz link

Happens even with the default example from the docs

Logs

No response

System Info

iOS

Before submitting

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

[TomHart]

Even just using the default example from the docs has the same outcome, it just selects the text rather than opening the context menu, regardless of where I long press.

iOS 16.7.5, using Safari

[SoyDiego]

I wrote something similar here about ModeToggle. On iOS is not working either. https://github.com/shadcn-ui/ui/discussions/2130

I hope @shadcn can check this things because is from December the problem :(

[TomHart]

I tried the radix context menu docs and that didn't seem to work either so it maybe is an underlying issue

[brett-ir]

Any updates on this one?