Question: Unmount component

[enheit]

I have a problem with states inside react-modal. I have couple of components inside react-modal. After I close this modal and reopen again, states of internal components still the same (for instance, input values do not reset after modal toggling). Is there such a possibility to reset all state inside react-modal after close? I know it should be done inside componentWillUnmount but as far as I understood react-modal hides instead of unmounting.

My current solution is - do not render modal until open.

state = {
 isModalOpen: false
}

// somewhere in component
{ isModalOpen && <Modal isOpen={ isModalOpen }  /> }

[diasbruno]

It is possible that maybe Modal.js#L113 and/or Modal.js#L129 are skipping some updates. (?)

[diasbruno]

@ajfuller any thoughts on this one?

[fuller]

@enheit is this with the latest 2.0.6 release? Just to make sure we're reproducing the issue correctly, could you create a minimal reproduction in a repo or on https://codesandbox.io/? Thanks!

@diasbruno it should only be preventing render if the state is different, so closing and reopening should trigger the renderPortal method.

We do have a blindspot in our tests for state changes of modals, so maybe there is something we're missing there 🤷‍♂️ (working on a PR that I should have out shortly)

[fuller]

@enheit I've created the following codesandbox: https://codesandbox.io/s/X4KQq22A

I'm not seeing the behavior as described with the latest published version. Are you rendering anything differently from my demo?

[enheit]

@ajfuller I use 1.7.1 version of react-modal. So, I need to update lib and review it again.
Does 2.0.6 release has incompatible changes with 1.7.1. According to versioning it has.

[diasbruno]

@enheit It should be compatible. The major version is just the modernization of the js syntax.

[enheit]

@diasbruno, @ajfuller thanks for reply. Here is my codesandbox example: https://codesandbox.io/s/oQjMMQjMX
It looks weird. I selected 1.7.1 version of react-modal and ControlledInput invokes componentWillUnmount.

[diasbruno]

This behavior can happen when removePortal is called or when the ModalPortal is ready to close which will return null or an empty div (and trigger unmount).

[enheit]

Anyway, I will check it tomorrow (will update to latest release) and provide you response.

[enheit]

@diasbruno, @ajfuller I have updated react-modal to 2.0.6 but state inside modal still the same. Is it depends on my libs? For example, I use redux state manager and redux-form. And this (redux-form) doesn't change after toggling window. Any idea?

[diasbruno]

You can check if redux-form don't clear the state after unmount. Since it stores the information on the redux state, it can recover the previous information. Probably, you will need to dispatch and action to clean the state.

[Neurostep]

@enheit I'm stuck with the same problem (using redux-form too). Did you find a solution finally?

[enheit]

@Neurostep unfortunately no :( If I will find solution it will be explained in this post ASAP.