This has been addressed before, but the issue is two years old, so I'm re-addressing it, as it points out a violation in the "controlled" aspect of components.
As I understand, the open prop in the TransitionablePortal component should control the visibility/open-state of the portal and should not be affected by any other state-derived influence.
Basically, I would like to use Popup components containing more complex data (other than strings) inside an animated modal or any component housed in a portal.
This issue is not present if the Modal is not inside TransitionablePortal or standard Portal, and works correctly, but at the expense of not utilizing the smoother, animated transition. This issue is present in a standard, non-animated Portal as well. This makes sense, since TransitionablePortal is just sugar for Portal and Transition.
A contrived example is provided at CodeSandbox that illustrates the issue:
https://codesandbox.io/s/react-typescript-c4mdl
Create a controlled Popup inside a Modal that's itself inside TransitionablePortalorPortal`
Close that popup via state
The Popupshould close
The Popup closes but the TransitionablePortalit's contained in closes also
Latest version as loaded into the CodeSandbox example provided
Same issue using a calendar popup component inside a TransitionablePortal: selecting a day or navigating between months in the calendar closes the Portal.
UPDATE
In my case adding:
closeOnDocumentClick={false}
resolve the issue.
Confirmed, happens only on TransitionablePortal, a normal Portal works fine.
Closing this issue as it looks like this is no longer an issue when using the latest v1.0.0 release.
Most helpful comment
Same issue using a calendar popup component inside a TransitionablePortal: selecting a day or navigating between months in the calendar closes the Portal.
UPDATE
In my case adding:
closeOnDocumentClick={false}resolve the issue.