[Question] Is this indented feature?: Context data is maintained regardless of component lifeCycle if the overlay has the same ID.

[nayounsang]

hello. I used a context provider inside the overlay. Give value to Provider with props.

  const handleFileButtonClick = () => {
    overlay.open(
      ({ isOpen, close }) => (
        <ModalContainer isOpen={isOpen} onClose={close}>
          <FileUploadAndSelectModal providerValue={providerValue} />
        </ModalContainer>
      ),
      { overlayId: `File-Upload-Select` }
    );
  };

// FileUploadAndSelectModal
const FileUploadAndSelectModal = ({providerValue})=>{
return(
<MyContext.Provider value={providerValue}>
{/*....*/}
</MyContext.Provider?
)
}

This modal can be opened with sameID:File-Upload-Select on multiple pages. Different pages inject different providerValue. I had to refresh the page to get the desired providerValue within the modal. I solved this by giving each overlay a different id, such as uuid. Is this indented feature?

[ojj1123]

Yeah this is intended. Given the same overlayId, if you don't call unmount callback, the same overlay is in memory. related issue: https://github.com/toss/overlay-kit/issues/57

So if you want to reset providerValue, call unmount callback after close or just call unmount for closing the overlay.

  const handleFileButtonClick = () => {
    overlay.open(
      // `unmount` instead of `close`
      ({ isOpen, unmount }) => (
        <ModalContainer isOpen={isOpen} onClose={unmount}>
          <FileUploadAndSelectModal providerValue={providerValue} />
        </ModalContainer>
      ),
      { overlayId: `File-Upload-Select` }
    );
  };