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

[einaralex]

🐛 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

[einaralex]

If someone could point me in the right direction on how to debug this I could take a stab at it. Haven't gotten anywhere yet.

[loque]

It seems to be related to FocusLock in Dialog. In this CodeSanbox I'm replacing it with a regular Fragment and works as expected.

Edit: it also works if you pass dangerouslyBypassFocusLock={true} to DialogOverlay. Here is an example of that.

[einaralex]

@loque I can not express how thankful I am for the workaround, thank you so very much!
Also extremely helpful to see how you debugged it . 🙏

[loque]

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

[chaance]

The consequences are that your Dialog is no longer accessible if you do that, hence why the prop tells you that it's dangerous! You can implement your own focus lock but that's a lot of work. I'll investigate this.

[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 🥇

[chaance]

So it's been a while, but I did dig pretty deep into this with a similar issue for menu-button and unfortunately the takeaway (for now) is that we do not support nested portals. I may reconsider this, but the solution for now is to set portal to false on either Listbox or ListboxPopover and updated styles accordingly. More details here: #808 (comment)