[bug]: Not choosing a value in a select nested in a popover closes the popover.

[typeleven]

Describe the bug

if a select is placed in a popover the popover closes if you click out of the select without choosing a value.

Affected component/components

Popover

How to reproduce

click on popover enter select click back into the popover popover closes

Codesandbox/StackBlitz link

https://v0.dev/r/TOP7DD1xxY1?share=QI8DlC6dERDKeXgz36iMHglr

Logs

No response

System Info

v0

Before submitting

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

[Alxertion]

I encountered this bug too, and found where the issue lies (+ a workaround for it). I was using "@radix-ui/react-popover": "1.1.2", downgrading it to "@radix-ui/react-popover": "1.1.1" fixed the problem.

[niss36]

Faced the same issue today, funnily enough the v0.dev link shows the correct behaviour now 🤔. I'm using "@radix-ui/react-popover": "1.1.1" (also tried 1.1.0 and 1.1.2) and "@radix-ui/react-select": "2.1.2".

In case this helps anyone else, my workaround was to control the open state on both the Popover and Select, and prevent the Popover from closing if the Select is currently open. Something like:

  const [open, setOpen] = useState(false);
  const [selectOpen, setSelectOpen] = useState(false);

  <Popover open={open} onOpenChange={(v) => !selectOpen && setOpen(v)}>
    {/* ... */}
    <Select open={selectOpen} onOpenChange={setSelectOpen}>
      {/* ... */}
    </Select>
    {/* ... */}
  </Popover>

[aretel]

Encountered the same bug today. Selects do not like Popovers. Does anybody know a clean workaround?

[aretel]

const [selectOpen, setSelectOpen] = useState(false);

This worked and is relatively clean.

[aretel]

any updates on this issue?

[saevig]

This works

        <PopoverTrigger asChild>
          <Button variant="outline">Open Popover with Select</Button>
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-4">
            <h4 className="font-medium leading-none">Select an option</h4>
            <p className="text-sm text-muted-foreground">
              The popover will stay open while you interact with the select
            </p>
            <Select>
              <SelectTrigger
                onPointerDown={(e) => {
                  // Prevent the click from closing the popover
                  e.stopPropagation()
                }}
              >
                <SelectValue placeholder="Select an option" />
              </SelectTrigger>
              <SelectContent
                onCloseAutoFocus={(e) => {
                  // Prevent focus returning to popover which would close it
                  e.preventDefault()
                }}
              >
                <SelectItem value="option1">Option 1</SelectItem>
                <SelectItem value="option2">Option 2</SelectItem>
                <SelectItem value="option3">Option 3</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-sm text-muted-foreground">Try clicking outside the select without making a selection</p>
          </div>
        </PopoverContent>
      </Popover>

[alynaug]

@heisenbugespen Thanks! This is it

[softmarshmallow]

this claims that this issue is fixed, but its obviously not. https://github.com/radix-ui/primitives/issues/2224

I'm just using native-select as a solution (with popover), much simpler.