Input not working inside a Popover which is inside a dialog - ShadCn Next.js

Here in my colorpicker.jsx i have HexColorPicker and an input which shows hex code. I am able to use HexColorPicker but unable to use input. I have used this colorpicker inside and dialog which is I think is issue. If use this colorpicker outside dialog it is working but not inside dialog.

//colorpicker.jsx
<Popover onOpenChange={setOpen} open={open}>
  <PopoverTrigger asChild disabled={disabled} onBlur={onBlur}>
    <Button
      {...props}
      className={cn('block', className)}
      name={name}
      onClick={() => setOpen(true)}
      size="icon"
      style={{ backgroundColor: parsedValue }}
      variant="outline"
    >
      <div />
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-full" style={{ pointerEvents: "auto" }}>
    <HexColorPicker color={parsedValue} onChange={onChange} />
    <Input
      maxLength={7}
      onChange={(e) => onChange(e.currentTarget.value)}
      ref={ref}
      value={parsedValue}
    />
  </PopoverContent>
</Popover>

Here adding style={{ pointerEvents: "auto" }} on PopoverContent makes HexColorPicker usable but input is still not working.

Here is my dialog

<Dialog>
    <DialogTrigger asChild>
        <Button variant="secondary">QR Design Options</Button>
    </DialogTrigger>
    <DialogContent className="lg:max-w-[1000px] lg:max-h-[560px] overflow-hidden absolute" 
    onInteractOutside={(e) => { e.preventDefault(); }}>
        <ColorPicker name="qrColor" className="mt-2 w-8 h-8 rounded-lg items-center"
            value={designQRColor}
            onChange={(v) => {
            setQRColor(v);
            setOptions((options) => ({
                ...options,
                dotsOptions: {
                    ...options.dotsOptions,
                     color: v,
                },
            }));
          }}
        />
    </DialogContent>
</Dialog>

Solution

There are a couple of things you can try to resolve this issue:

Set modal={true} in the Popover component. Adding the modal prop can help manage focus and prevent background interactions. See this GitHub issue comment for more details:

<Popover onOpenChange={setOpen} open={open} modal={true}>

Remove <PopoverPrimitive.Portal> from popover.tsx. If the issue persists, removing <PopoverPrimitive.Portal> from the popover.tsx component might help. This prevents the popover from rendering in a separate React portal, which can sometimes cause focus or positioning issues. See this GitHub comment for reference.

Let me know if this helps!