Resetting Modal state on close

[hey-robin]

Hi all! I have a question about the Modal component.
My team is working on a multi-page form wizard inside a modal. Since the Modal component does not unmount when isOpen === false , any state within the component will persist if the modal is opened again.

If the modal is dismissed, we want the user to have a fresh form state when they re-open it, Currently, our plan is to manually clear all of the form state, but it's feeling a little hacky since the form wizard contains a variety of state data. We could also wrap the component in a HOC that unmounts if isOpen === false but I'm guessing we would miss out on those nice fadeIn/fadeOut animations.

I wanted to check in with the team to see if this use case has come up in the past. And if so, is there a pattern the team recommends?

[TheSisb]

Hi @robnit,

Our Modal currently unmounts when closed, so form state should be cleared. Here's an example in Codesandbox: https://codesandbox.io/s/gallant-sutherland-1pebsd?file=/src/index.tsx

What I imagine could be happening for you is that your form state is defined in a parent component (like this example) which doesn't unmount and resets the initial value of the form elements on mount.

If this doesn't help solve your problem, could you create a minimal reproduction on Codesandbox please?

[hey-robin]

Oops, you are totally right. I made some erroneous assumptions about our component structure. The state is indeed scoped outside the Modal. Sorry about that & thanks for taking the time to answer!