Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hiz8 opened this issue Aug 31, 2020 · 16 comments
Closed

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

hiz8 opened this issue Aug 31, 2020 · 16 comments
Labels

Comments

@hiz8
Copy link

hiz8 commented Aug 31, 2020

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 kyletsang added the bug label Sep 4, 2020
@kyletsang
Copy link
Member

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
Copy link
Member

jquense commented Sep 16, 2020

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
Copy link

cduff commented Oct 21, 2020

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
Copy link
Member

jquense commented Oct 21, 2020

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

@jquense
Copy link
Member

jquense commented Oct 21, 2020

facebook/react#20074

RyanNerd added a commit to RyanNerd/rxchart-web that referenced this issue Oct 25, 2020
The dropdown button would stop working after a modal was opened. After a 🌦 day of pulling my 🦱 out trying to figure out what had happened. Finally found this: react-bootstrap/react-bootstrap#5409
Had to thunk React back down to 16.14.0
@karesztrk
Copy link

karesztrk commented Oct 29, 2020

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
Copy link

nevenwt commented Nov 4, 2020

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
Copy link
Member

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
Copy link

codingstill commented Nov 5, 2020

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
Copy link
Member

@codingstill I’ll look into this for BS3

Hrommi added a commit to Hrommi/projects-frontend-l4-server that referenced this issue Nov 8, 2020
Fix for `Dropdown` from `react-bootstrap` bug. Look [this issue](react-bootstrap/react-bootstrap#5409).
mokevnin pushed a commit to hexlet-components/projects-frontend-l4-server that referenced this issue Nov 8, 2020
Fix for `Dropdown` from `react-bootstrap` bug. Look [this issue](react-bootstrap/react-bootstrap#5409).
@abepark01
Copy link

@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
Copy link
Member

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

cc @jquense

@masciugo
Copy link

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

@kyletsang
Copy link
Member

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

@mikhael28
Copy link

mikhael28 commented Jan 28, 2021

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
Copy link

@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.

RyanNerd added a commit to RyanNerd/rxchart-web that referenced this issue Jun 15, 2021
- Added components:
  - ClientButton.tsx
  - ClientDobButton.tsx
  - App.tsx now imports the above buttons.
  - ClientButton allows for opening the edit modal, printing medbox labels, copying the name to the clipboard and launching HMIS, and switching clients.
  - ClientDobButton shows client notes.
  - Added workaround for dropdown buttons stopping working in React 17 due to the way mouse events are handled.
    - See react-bootstrap/react-bootstrap#5409 (comment)
- Closes #124
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests