Dropdown won't open after launching Modal in React v17-RC

[hiz8]

Describe the bug

I'm currently preparing to update my React version to v17 for a react-bootstrap-based application.
In the process, I find that Dropdown won't open on the same page when launching a modal.

To Reproduce

1. Update your React version to 17-RC and have a page with Modal and Dropdown present.
2. Launch Modal and close it.
3. Click DropdownButton to try to show Dropdown, but it doesn't appear

Reproducible Example

https://codesandbox.io/s/react-playground-forked-ojvpm

Expected behavior

Dropdown opens without any problems after launching a modal, just as it did with React v16.

Environment (please complete the following information)

• Operating System: Windows 10
• Browser, Version: Firefox 81
• React-Bootstrap Version: 1.3.0

[kyletsang]

Traced this down to useRootClose in react overlays. Both the button click and the document mouse click fires so the dropdown is opened, then quickly closed. The mouse click in useRootClose only occurs if the modal has been opened - not sure why yet.

[jquense]

This is due to how react 17 handles event delegation. Previously react always listened on the document for all events. In 17 it listens on the render "root" instead. The core issue here is root close logic is assuming specific ordering between it's native handlers and when react responds to the same event, but that order is now different

[cduff]

I just ran into this bug as React 17.0.0 has just been officially released. I'm guessing therefore that many will try upgrading and hit this bug. I'm going to revert to React 16.14.0 until fixed as I'm not sure if there is a workaround?

[jquense]

no workaround at the moment, gonna try and block off some time to fix this today

[jquense]

facebook/react#20074

[karesztrk]

I made it working by using the good old stopPropagation. Attach an onClick listener to the dropdown and stop the event.
Can you confirm that its working for you?

[nevenwt]

This issue also seems to be affecting Overlay/OverlayTrigger.
I was able to work around it by specifying rootCloseEvent="mousedown".

Apologies if this comment is in the wrong place.

[kyletsang]

This has been fixed and released in react-overlays 4.1.1. Clear react-overlays from your node_modules folder and run an install again. React-bootstrap installs it as a transitive dependency and should pick up the latest version.

[codingstill]

The same issue exists in 0.33.1. Should we expect a fix for Bootstrap 3 as well? Should I create a new issue for this?

P.S. The onClick={(e) => e.stopPropagation()} workaround works well only if there is one dropdown in the page. If there are multiple dropdowns, it ends up will many open dropdowns.

[kyletsang]

@codingstill I’ll look into this for BS3

[abepark01]

@kyletsang

It looks like react-overlays 4.1.1 is not compatible with react-bootstrap 0.33.1 (Bootstrap 3).

react-bootstrap 0.33.1 imports from react-overlays/lib/Overlay' but the the actual folder is react-overlays/Overlay`

Any workarounds for those still on Bootstrap 3 (react-bootstrap 0.33.1)?
Thank you!

ERROR in ./node_modules/react-bootstrap/es/Modal.js
Module not found: Error: Can't resolve 'react-overlays/lib/Modal' in '/Users/abepark/workspace/cargomatic/admin-client/node_modules/react-bootstrap/es'
 @ ./node_modules/react-bootstrap/es/Modal.js 13:0-49
 @ ./node_modules/react-bootstrap/es/index.js
 @ ./src/main/js/components/site/nav.js
 @ ./src/main/js/components/command.js
 @ ./src/main/js/app.js
 @ multi core-js/modules/es6.promise core-js/modules/es6.array.iterator bootstrap-loader ./src/main/js/app.js webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080/

ERROR in ./node_modules/react-bootstrap/es/Overlay.js
Module not found: Error: Can't resolve 'react-overlays/lib/Overlay' in '/Users/abepark/workspace/cargomatic/admin-client/node_modules/react-bootstrap/es'
 @ ./node_modules/react-bootstrap/es/Overlay.js 7:0-53
 @ ./node_modules/react-bootstrap/es/index.js
 @ ./src/main/js/components/site/nav.js
 @ ./src/main/js/components/command.js
 @ ./src/main/js/app.js
 @ multi core-js/modules/es6.promise core-js/modules/es6.array.iterator bootstrap-loader ./src/main/js/app.js webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080/

ERROR in ./node_modules/react-bootstrap/es/DropdownMenu.js
Module not found: Error: Can't resolve 'react-overlays/lib/RootCloseWrapper' in '/Users/abepark/workspace/cargomatic/admin-client/node_modules/react-bootstrap/es'
 @ ./node_modules/react-bootstrap/es/DropdownMenu.js 11:0-67
 @ ./node_modules/react-bootstrap/es/Dropdown.js
 @ ./node_modules/react-bootstrap/es/SplitButton.js
 @ ./node_modules/react-bootstrap/es/index.js
 @ ./src/main/js/components/site/nav.js
 @ ./src/main/js/components/command.js
 @ ./src/main/js/app.js
 @ multi core-js/modules/es6.promise core-js/modules/es6.array.iterator bootstrap-loader ./src/main/js/app.js webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080/

ERROR in ./node_modules/react-bootstrap/es/Modal.js
Module not found: Error: Can't resolve 'react-overlays/lib/utils/isOverflowing' in '/Users/abepark/workspace/cargomatic/admin-client/node_modules/react-bootstrap/es'
 @ ./node_modules/react-bootstrap/es/Modal.js 14:0-67
 @ ./node_modules/react-bootstrap/es/index.js
 @ ./src/main/js/components/site/nav.js
 @ ./src/main/js/components/command.js
 @ ./src/main/js/app.js
 @ multi core-js/modules/es6.promise core-js/modules/es6.array.iterator bootstrap-loader ./src/main/js/app.js webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080/

[kyletsang]

There's a fix in the BS3-compatible react-overlays branch but no release yet.

cc @jquense

[masciugo]

@kyletsang is there any open issue for BS3 we can watch? thank you

[kyletsang]

@masciugo, I created #5561 for tracking. Please follow that for updates.

[mikhael28]

Using react-bootstrap 0.32, I can confirm @karesztrk 's stop propagation fix worked perfectly. Only have one drop-down, so who knows. I recently upgraded CRA to 4.x, and React to 17, so I've encountered a few hiccups (really smooth all things considered though)

The cost to switch 1.x is not worth it for me, especially with the code-splitting that already comes with 0.32 ("react-bootstrap/lib/Dropdown") HOWEVER, the uncontrolled drop-down component has an unsafe lifecycle warning for componentWillReceiveProps - and has an ugly error warning in the console. Will probably switch it out for something else.

[catamphetamine]

@kyletsang

This has been fixed and released in react-overlays 4.1.1. Clear react-overlays from your node_modules folder and run an install again. React-bootstrap installs it as a transitive dependency and should pick up the latest version.

FYI to googlers: not just rm -rf node_modules and then yarn: also rm yarn.lock before yarn, otherwise react-overlays will stay at 4.1.0.