Color selector not working when editor is placed inside a dialog

[BlackBearFTW]

Hi,

When you place the minimal tiptap editor inside a shadcn dialog and try to use the color picker (SectionThree), the popover opens, but you can't actually be able to select a color?

[Aslam97]

@BlackBearFTW can you show me step to reproduce it? I tried and its working fine

https://github.com/user-attachments/assets/cad1118a-9fb9-4557-9b6e-31ddcbdeb882

[BlackBearFTW]

Sure! I made a demo video, I just copied everything in your minimal-tiptap folder as the readme explains, the only thing I changed was the icons since I use lucide react icons for everything.

This is my code:

export function CreateBudgetRequestDialog({children, onSubmit, projectId}: {
    children: ReactNode,
    onSubmit: (values: CreateBudgetRequestsFields) => void,
    projectId: string
}) {
    const [open, setOpen] = useState(false)

    const form = useForm<CreateBudgetRequestsFields>({
        resolver: zodResolver(createBudgetRequestFormScheme),
        defaultValues: {
            title: "",
            description: "",
            amount: 0,
            projectId
        },
    });

    const onOpenChange = (open: boolean) => {
        setOpen(open);
        if (open) return;

        form.reset();
    }

    const onFormSubmit = (values: CreateBudgetRequestsFields) => {
        onSubmit(values);
        setOpen(false);
        form.reset();
    }

    return (
        <Dialog onOpenChange={onOpenChange} open={open}>
            <DialogTrigger asChild>
                {children}
            </DialogTrigger>
            <DialogContent className="max-w-4xl xl:max-w-6xl">
                <DialogHeader>
                    <DialogTitle>Create new budget request</DialogTitle>
                </DialogHeader>

                <Form {...form}>
                    <form
                        onSubmit={form.handleSubmit(onFormSubmit)}
                        className="grid gap-y-2"
                    >

                        <FormField
                            control={form.control}
                            name="title"
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel withAsterisk>
                                        Title
                                    </FormLabel>
                                    <FormControl>
                                        <Input  {...field} />
                                    </FormControl>
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />

                        <FormField
                            control={form.control}
                            name="description"
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel withAsterisk>
                                        Description
                                    </FormLabel>
                                    <FormControl>
                                        <MinimalTiptapEditor
                                            {...field}
                                            className="w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                                            output="html"
                                            placeholder="Type your description here..."
                                            autofocus={true}
                                            editable={true}
                                            editorContentClassName="overflow-auto min-h-72 max-h-72"
                                            editorClassName="p-2 min-h-72"
                                        />
                                    </FormControl>
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />

                        <FormField
                            control={form.control}
                            name="amount"
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel withAsterisk>
                                        Amount
                                    </FormLabel>
                                    <FormControl>
                                        <Input type="number"
                                               step="any"
                                               startIcon={Euro}
                                               min="0"
                                               {...field}
                                        />
                                    </FormControl>
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />

                        <Button type="submit" className="mt-2">
                            Create
                        </Button>
                    </form>
                </Form>

            </DialogContent>
        </Dialog>
    );
}

https://github.com/user-attachments/assets/a284615e-efe2-44be-b8a4-ed0e5cbe67ea

[BlackBearFTW]

I figured out I could put modal={true} on the popover in SectionThree, but that introduces the issue where if the popup is open and the dialog gets closed, it will make the rest of the website unresponsive. So that is a solution I was trying to avoid.

[Aslam97]

@BlackBearFTW it doesn't look right to me. why is the tooltip, dropdown, popover like the css is missing?

[BlackBearFTW]

@BlackBearFTW it doesn't look right to me. why is the tooltip, dropdown, popover like the css is missing?

It only does that for the color picker, probably because it doesn't see that as a real element?

[Aslam97]

@BlackBearFTW Have you install these package?

@radix-ui/react-focus-scope
@radix-ui/react-dismissable-layer

from what I know, radix add pointer event none to the body

[BlackBearFTW]

@BlackBearFTW Have you install these package?

@radix-ui/react-focus-scope
@radix-ui/react-dismissable-layer

from what I know, radix add pointer event none to the body

Both of these are installed yes

[Aslam97]

@BlackBearFTW take a look at this https://github.com/radix-ui/primitives/issues/2121#issuecomment-1531213456 make sure all the package version. try remove node_modules and lock file update all the package.

Note: You shouldnt even need to specify modal={true} to any Popovers inside Dialog components.

[BlackBearFTW]

Sadly that did not resolve the issue, I found this https://github.com/shadcn-ui/ui/issues/1511

[Aslam97]

@BlackBearFTW will add the dialog example to the repo.

[Aslam97]

@BlackBearFTW Take a look at this example https://github.com/Aslam97/shadcn-minimal-tiptap/commit/3a06d5173248b7754eea3a48109bdf5912c3b08f I dont even need modal={true}

[Aslam97]

@BlackBearFTW Will close this issue for now. as I have added the dialog example.