I'm using the Carbon-react ui ComposedModal, inside the body of the Modal I'm rendering another component... when the user close the Modal by clicking on the close button, or clicks anywhere on the screen the modal is closed, but the componentWillUnMount of the inner component is not reached.
I tried implementing this solution: reactjs event listener beforeunload added but not removed`
But it reach the unload event only when closing the tab or refreshing the page manually (Not what I need)
I tried implementing something like this to force the unmount (with toggleThisOneOnly that I turn it off -false- whne pressing the close button), but didn't do the trick:
{this.state.configuration !== null && this.toggleThisOneOnly &&
(this.state.fabricationStatus === null || this.state.fabricationStatus !== Constants.fabricationStatus.STARTED) ?
<ComposedModal
key={this.props.project.Name + "_ShowData"}
open={this.state.openShowData}
onClose={() => {
console.log("Handling closing")
this.setState({toggleThisOneOnly: false})
this.toggleShowDataModal(false)
}}
height={500}
className="some-class"
>
<ModalHeader title="Fabricated records" className="HeaderToolbar White">
</ModalHeader>
<ModalBody>
<br/>
{this.toggleThisOneOnly ? <ShowData projectName={this.projectName} config={this.state.configuration}/> : null}
</ModalBody>
</ComposedModal>
: null}
I can't use the onClose event of the Modal cause I need to use some data inside the ShowData componnet to deal with before closing. Worst case I can add event emitter I guess from parent component that will be catched in inner one -hopefully, cause it's not unmounted yet-
Is there a better solution?