[Listbox] ListboxPopover portal immediately closes first time it's opened within a Dialog. ( React 17+)

🐛 Bug report

Current Behavior

1. With a Listbox visible in a Dialog, click the Listbox
2. Listbox opens and closes immediatly.
3. Click again.
4. Listbox opens normally.

This seems to be fine in older versions of React, not working in 17.0.1

Expected behavior

1. With a Listbox visible in a Dialog, click the Listbox
2. Listbox opens normally.

Reproducible example

CodeSandbox Template

You can replicate this by using the buttons in the dialog toggling the portal to true. It should be fine with portal set to false.

Suggested solution(s)

Additional context

Unit test:

     it(`should display ListboxPopover`, () => {
        let { getByRole, queryByRole } = render(
          <Dialog isOpen={true} aria-label="test">
          <Listbox portal={true}>
            <ListboxOption value="pollo">Pollo</ListboxOption>
            <ListboxOption value="asada">Carne Asada</ListboxOption>
            <ListboxOption value="lengua">Lengua</ListboxOption>
            <ListboxOption value="pastor">Pastor</ListboxOption>
          </Listbox>
          </Dialog>
        );

        act(() => void fireMouseClick(getByRole("button")));
        expect(queryByRole("listbox", { hidden: false })).toBeTruthy();
      });

This test will fail. Changing portal toportal={false} will pass.

Your environment

Software	Name(s)	Version
Reach Package	@reach/listbox	0.11.2-0.13.0
React		17.0.1
Browser	Chrome
Assistive tech
Node
npm/yarn
Operating System	MacOS

[chaance]

I’m also afraid there’s another bug in your example: all options except for Popeye’s are invalid and should not be selectable. We’ll make sure to tackle that in the next release too 🥇

[loque]

@einaralex no need! Although I meant to add information for further exploration, I really don’t know the possible consequences of doing that.