Reakit: Parent dialog closes with nested dialog when parent has been opened and closed once

[nerdyman]

🐛 Bug report

Current behavior

Parent dialog closes at the same time as the child dialog after parent dialog has been opened and closed once.

Steps to reproduce the bug

1. Open parent dialog
   
   
   
   • Open child dialog
   
   
   • Click away from child dialog
   
   
   • Parent dialog stays open
   
   
2. Close parent dialog and open it again
   
   
   
   • Open child dialog
   
   
   • Click away from child dialog
   
   
   • Parent dialog closes at the same time as the child
   
   

CodeSandbox: https://codesandbox.io/s/react-reakit-nested-dialog-ebnve
Recording: https://streamable.com/lb04p

Expected behavior

The parent dialog should not close at the same time as the child.

Possible solutions

Not sure :|

Environment

System:
    OS: Linux 5.4 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz
    Memory: 2.38 GB / 24.86 GB
    Container: Yes
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.21.1 - /bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Brave Browser: unknown
    Firefox: 72.0.1
  npmPackages:
    react: ^16.12.0 => 16.12.0 
    react-compare-slider: ^1.0.0 => 1.0.0 
    react-dom: ^16.12.0 => 16.12.0 
    reakit: ^1.0.0-beta.12 => 1.0.0-beta.13

I'm using 1.0.0-beta.13 but the CodeSandbox link uses 1.0.0-beta.14 and has the same issue, it occurs on the latest on Chrome on Windows and Linux (haven't tested macOS).

If anyone knows of a solution I'm happy to attempt a PR.

Thanks!

[open-collective-bot[bot]]

Hey @nerdyman :wave:,

Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.

If you use Reakit at work, you can also ask your company to sponsor us :heart:.

[diegohaz]

@nerdyman Thanks for opening the issue and for the reproduction! I'll investigate it. In the meantime, passing onMouseDown={event => event.preventDefault()} to DialogBackdrop should fix the issue.

[nerdyman]

@diegohaz Awesome! thanks for the workaround.