[BUG] When using Select component inside a Modal component from Chakra UI V2

[Ludvig Stiernström]

Description

Hello,

I am using the Select component inside of a Chakra UI Modal component.
Everything works as expected until the moment I close the Modal and re-open it.

The selections are gone when the Modal is re-opened. However, it appears that the value state is still saved because when I create: const [selectValue, setSelectValue] = useState([]);
Then I update the state with an onChange={(event) => setSelectValue(event)} and then read that state when opening the modal again it appears to be saved.

chakra-react-select Version

4.0.0

Link to Reproduction

https://codesandbox.io/s/chakra-ui-react-select-forked-1rmcdb

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Open the modal with the "Open Modal"-button
2. Select some things into the Select component
3. Close the modal
4. Open the modal

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

No response

[Chris Sandvik]

I'll preface this by saying, this is not unique to Chakra UI v2, this has been the case since v1.

This is the intended behavior of the Chakra Modal component. When the modal is closed, its contents are completely removed from the DOM which means all internal state is lost. See this issue for more info: chakra-ui/chakra-ui#803 (comment)

The only way to avoid this is to store the selected values in a state variable that is created outside of the modal contents, otherwise it will be cleared every time the modal is closed.

Here's a Chakra v1 and Chakra v2 example to demonstrate that they have the same behavior:

• Chakra UI v1: https://codesandbox.io/s/chakra-react-select-modal-example-v3-v1i3rm?file=/example.js
• Chakra UI v2: https://codesandbox.io/s/chakra-react-select-modal-example-v0ysxl?file=/example.js

[Ludvig Stiernström]

I really must've confused myself. You are completely right that it is 100% intended behavior, my bad.
Thanks for the comment!