Menu does not close when using on reactstrap modal

[HansAarneLiblik]

I have an issue when using react-bootstrap-typeahead together with reactstrap. (This works with react-bootstrap, but migrating would be a huge effort).

When the Typeahead is on modal and menu is open, the menu won't close when clicking away from the component (As testable in codesandbox). Menu DOES close, when selecting an item though, but there are cases when user does not actually want to select anything.

We could create a wrapper and handle menu open/close state ourselves, but would prefer not to, if possible

Version

6.0.2

Steps to reproduce

Sandbox: https://codesandbox.io/s/reactstrap-bug-lu30xq

1. Open the modal
2. Click on input
3. Click away from the input (in modal)

Expected Behavior

Menu closes when focus is removed (Clicked anywhere on the modal, not backdrop)

Actual Behavior

Menu does not close

[HansAarneLiblik]

Also opened a bug report on reactstrap reactstrap/reactstrap#2718

[ericgio]

Hey @HansAarneLiblik thanks for opening this issue. I believe this is an issue with either Reactstrap or React-Overlays's useRootClose hook, which this library uses to control the menu visibility. Here's a minimal repro using just useRootClose.

[GABuryan]

@HansAarneLiblik This is not a reactstrap issue. This is a react problem. On React version 16.8 - worked. On React version >17 - not worked.