Popover opened inside a Dialog closes immediately under certain circumstances

[leofavre]

Bug report

Current Behavior

A Popover opened inside a Dialog closes immediately when:

• @radix-ui/react-dialog version is 1.0.4;
• @radix-ui/react-popover version is 1.0.6;
• Popover.Trigger re-renders according to the Popover.Root state;
• Popover.Portal is present;

Screen.Recording.2023-08-18.at.13.05.11.mov

Expected behavior

The Popover should stay opened when the trigger is clicked.

Reproducible example

Code Sandbox

Additional context

• Fails on Chrome, Safari and Firefox;

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog; @radix-ui/react-popover	1.0.4 and 1.0.6 respectively
React	n/a	18.2.0
Browser	Chrome	115.0.5790.170 (Official Build) (arm64)
Assistive tech	n/a
Node	n/a	16.19.0
npm/yarn	yarn	1.22.19
Operating System	MacOS	13.4.1 (c) (22F770820d)

[joaom00]

It looks like to be #2180. Upgrade to RC version should work

Codesandbox

[leofavre]

@joaom00, any idea when the official release will be?

[joaom00]

Not sure

[steven-tey]

@leofavre facing the same issue too – looks like downgrading to react-dialog to 1.0.3 and react-popover to 1.0.5 is a good temporary fix – this bug doesn't happen in those version :)

[OgDev-01]

Hey @steven-tey! Have you tested this fix on Safari? We are having the same issue with popovers and dialogs with safari browsers in open-sauced/app#1144. Chrome and firefox works as expected.

Thanks in advance 🙏

[CarelessCourage]

We have this problem also. Implemented an ugly temporary fix by using a cooldown like this:

const [cooldown, setCooldown] = useState(false);
  const [open, setOpen] = useState(false);
  function handleSet() {
    if (cooldown) return;
    console.log(‘rex’);
    setOpen(!open);
    setCooldown(true);
    setTimeout(() => {
      setCooldown(false);
    }, 200);
  }

[steven-tey]

Can confirm that the fix from @CarelessCourage works as well! Ended up needing to upgrade react-dialog and react-popover to the latest version so this fix came in handy – thank you!

[nzjoel1234]

Am seeing this as well. In our case we have an onclick handler inside a DropdownMenu item (from react-dropdown-menu) setting an isPopoverOpen state variable. But as soon as the PopOver is rendered, the Popover is triggering onOpenChange(false)

[Garwend]

@nzjoel1234 I had the same problem and for me setting modal=true on popover fix this.

function StatusItem({ status }: StatusItemProps) {
 const [openChangeColor, setOpenChangeColor] = useState(false);

 return (
   <div className="border bg-body-background md:bg-background h-16 rounded-[20px] px-7 flex flex-row items-center shrink-0">
     <Popover
       open={openChangeColor}
       onOpenChange={setOpenChangeColor}
       modal={true}
     >
       <PopoverAnchor>
         <div
           className="w-[15px] h-[15px] rounded-full mx-4"
           style={{ backgroundColor: status.color }}
         />
       </PopoverAnchor>
       <PopoverContent>Color Picker</PopoverContent>
     </Popover>
     <span className="text-foreground font-medium text-sm">{status.name}</span>
     <div className="flex-grow flex-1"></div>
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button type="button" className="outline-none">
           <MoreVertical className="h-[18px] w-[18px] text-gray1" />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="md:w-52">
         <DropdownMenuItem>
           <Pencil className="mr-[10px] h-5 w-5" />
           <span>Change Name</span>
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={() => setOpenChangeColor(true)}>
           <Palette className="mr-[10px] h-5 w-5" />
           <span>Change Color</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   </div>
 );
}

[jyavorska]

Running into this as well, but haven't yet been able to figure our a workaround that works for us.

[nzjoel1234]

My issue was caused by the fact that closing the DropdownMenu auto focuses the DropdownMenu.Trigger.

Since the DropdownMenu.Trigger is outside of my Popover the focus of the Trigger causes the Popover to close.

To resolve this I added the following:

  <DropdownMenu.Content
    onCloseAutoFocus={(e) => {
      e.preventDefault();
    }}

[ycaruso]

@leofavre facing the same issue too – looks like downgrading to react-dialog to 1.0.3 and react-popover to 1.0.5 is a good temporary fix – this bug doesn't happen in those version :)

Thanks!! For me working in both browsers firefox and chrome

[desduggan]

Same happened for me. I have a popover command dropdown UX inside an alert dialog.

<AlertDialog...
<Popover...
<Command...

and basically my popover was auto closing.

Solution is to set <Popover modal={true} ... > AND <Popover.Content onOpenAutoFocus={e => e.preventDefault()} ... >

@nzjoel1234's solution worked but then triggered infinite recursion like #2390 as something fought over auto-focus. I had to prevent that by stopping the auto focus on the popover content 🤷‍♂️.