modal-open class is not being added to body in some cases

[python273]

• components: Modal
• reactstrap version #6.5.0
• import method umd/csj/es
• react version #16.4.1
• bootstrap version #4.1.3

What is happening?

Modal.destroy might be called twice on close + unmount, so Modal.openCount is becoming negative and modal-open is not being added to body

What should be happening?

Modal.destroy should not be called twice on close + unmount

Steps to reproduce issue

1. Open https://stackblitz.com/edit/reactstrap-hgyxbh?file=Example.js
2. Press "Edit something"
   modal-open is added to body
3. Close modal
4. Open modal
   modal-open is not added to body

[chriswayoub]

I ran into this same issue. I was conditionally rendering the Modal component, and I was hiding it in the onClose callback. This caused it to call componentWillUnmount() to be called immediately after the Modal.onClosed() method before the state.isOpen update had propagated. So destroy() ended up being called again in componentWillUnmount() after it had already been called in onClose().

I ended up just waiting to unmount the component until the next update cycle. If this is considered a bug, then it's probably best to use something other than the state to track whether or not the modal needs to be destroyed so you don't have to worry about any state race conditions.

[epcliff]

Is there fix to this issue? I'm having the same problem.

[python273]

There's a hacky solution. You need to wait until a modal is closed and only then unmount it

Fixed example: https://stackblitz.com/edit/reactstrap-jynqel?file=Example.js

[python273]

Though if you have only one opened modal, it should work ok I think (#1368)

[GoPro16]

I think the latter issue here is the Modal component is already driving whether or not to show or hide the contents. Mounting and unmounting the modal component and also controlling the modal open state inside another component seems redundant.

This could be why there are no other reported cases of this.

Furthermore, I was checking out the stackblitz link and it looks to me like the modal-body is being appended properly to the tag. Please re-open and include an updated stackblitz if this issue is still persisting for you.