Can't use menu-buttons inside of a dialog

[hedgerh]

I am trying to embed a reach menu-button inside of a reach dialog. This doesn't seem to work, though. The MenuList never appears.

Interestingly enough, I added a debugger to the Portal code, and when I clicked the play button inside of Chrome dev tools (not the one that appears over the window) to play through the execution, the MenuList appears!

https://codesandbox.io/s/j7lvkzwyz3

Is this a bug?

[joaogarin]

Could it be trying to open two portals and somehow not allowing? it looks like the attribute aria-expanded is triggered twice though..or just being set to "false", but it is being updated..

[ryanflorence]

Weird, yeah this is a bug.

Initially I don't know why this would happen, I don't even see the second portal opening in the dev tools as I interact with it.

If anybody feels like digging in to figure out why this might be happening I'd love to get your help.

Don't need a fix even, just figure out what the problem is.

[theKashey]

1. You open Dialog
2. It set up focus trap
3. You open Menu (you really did it)
4. It moves focus to a first element
5. Focus Trap returns focus back to Dialog
6. Menu handles onBlur and close itself.
7. It's closed.

3-7 are almost instant, the only way to catch it - set up breakpoint on reach-portal subtree modification.

As I said before - react-focus-lock probably would handle it out of the box

[hedgerh]

#83 seems to be where this is being discussed, so closing this.