Dialog can't triggered by context-menu

[yanquer]

when I wan't use a dialog which triggered by context-menu

import {Box, Button, ContextMenu, Dialog, Flex, Text, TextField} from "@radix-ui/themes";
import {ReactNode} from "react";


interface ADialogProps{
    triggerControl?: ReactNode

}

const ADialog = (props: ADialogProps) => {
    const {triggerControl} = props;
    return <Dialog.Root>
        <Dialog.Trigger>
            {/*<Button>Edit profile</Button>*/}
            {triggerControl}
        </Dialog.Trigger>

        <Dialog.Content maxWidth="450px">
            <Dialog.Title>Edit profile</Dialog.Title>
            <Dialog.Description size="2" mb="4">
                Make changes to your profile.
            </Dialog.Description>

            <Flex direction="column" gap="3">
                <label>
                    <Text as="div" size="2" mb="1" weight="bold">
                        Name
                    </Text>
                    <TextField.Root
                        defaultValue="Freja Johnsen"
                        placeholder="Enter your full name"
                    />
                </label>
                <label>
                    <Text as="div" size="2" mb="1" weight="bold">
                        Email
                    </Text>
                    <TextField.Root
                        defaultValue="[email protected]"
                        placeholder="Enter your email"
                    />
                </label>
            </Flex>

            <Flex gap="3" mt="4" justify="end">
                <Dialog.Close>
                    <Button variant="soft" color="gray">
                        Cancel
                    </Button>
                </Dialog.Close>
                <Dialog.Close>
                    <Button>Save</Button>
                </Dialog.Close>
            </Flex>
        </Dialog.Content>
    </Dialog.Root>

}

export const BtnDialog = () => {

    return <Box>
        <ContextMenu.Root>
            <ContextMenu.Trigger>
                {/*<RightClickZone style={{ height: 150 }} />*/}
                <Button className={"w-100 h-50 bg-black"} style={{ height: 150 }}>
                    右键打开 context-menu
                </Button>
            </ContextMenu.Trigger>
            <ContextMenu.Content>
                <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
                <ADialog triggerControl={
                    <ContextMenu.Item shortcut="⌘ E">Edit open dialog</ContextMenu.Item>
                }></ADialog>
                <ContextMenu.Item shortcut="⌘ E">
                    <ADialog triggerControl={
                        <Box>Edit open dialog2</Box>
                    }></ADialog>
                </ContextMenu.Item>

                <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
                <ContextMenu.Separator />
                <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

                <ContextMenu.Sub>
                    <ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>
                    <ContextMenu.SubContent>
                        <ContextMenu.Item>Move to project…</ContextMenu.Item>
                        <ContextMenu.Item>Move to folder…</ContextMenu.Item>
                        <ContextMenu.Separator />
                        <ContextMenu.Item>Advanced options…</ContextMenu.Item>
                    </ContextMenu.SubContent>
                </ContextMenu.Sub>

                <ContextMenu.Separator />
                <ContextMenu.Item>Share</ContextMenu.Item>
                <ContextMenu.Item>Add to favorites</ContextMenu.Item>
                <ContextMenu.Separator />
                <ContextMenu.Item shortcut="⌘ ⌫" color="red">
                    Delete
                </ContextMenu.Item>
            </ContextMenu.Content>
        </ContextMenu.Root>

    </Box>



}

The dialog will flash once and then close after being triggered.

how can I fix this, please?

[wintercounter]

It's the same issue when I want to open modal from a dropdown. Add onClick={(ev) => ev.stopPropagation()} on the trigger.

[yanquer]

It's the same issue when I want to open modal from a dropdown. Add onClick={(ev) => ev.stopPropagation()} on the trigger.

with stopPropagation in dialog-trigger and dialog in context-item ,

I can trigger with context-menu which may a new bug

After a few times, the right-click function will be lost.