Semantic-ui-react: Portal/TransitionablePortal closes on Popup close

Created on 7 Aug 2019  路  3Comments  路  Source: Semantic-Org/Semantic-UI-React

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

Steps

Create a controlled Popup inside a Modal that's itself inside TransitionablePortalorPortal`
Close that popup via state

Expected Result

The Popupshould close

Actual Result

The Popup closes but the TransitionablePortalit's contained in closes also

Version

Latest version as loaded into the CodeSandbox example provided

Testcase

https://codesandbox.io/s/react-typescript-c4mdl

bug

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.

All 3 comments

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.

https://codesandbox.io/s/react-typescript-th25r

Was this page helpful?
0 / 5 - 0 ratings