tajo/react-portal

Controlled property "isOpen"

eliseumds opened this issue · 3 comments

eliseumds commented

I'm manually controlling the state of the Portal because I have to deal with animations, but PortalWithState does not let me control its state meaning that, when user types ESC, the node is immediately removed from the DOM, which is undesirable because I need to wait for the animation to end. This is how it works:

  • User opens modal
  • State variables isPortalOpen and isModalOpen become true, rendering the DOM node and triggering the enter animation (react-transition-group)
  • User types ESC (or clicks outside, in case it's a tooltip/popover/dropdown)
  • State variable isModalOpen becomes false, triggering the exit animation
  • When the exit animation finishes, isPortalOpen is set to false

Because of that I believe that PortalWithState shouldn't control its state with this.state.active when this.props.isOpen is provided. What do you think? Am I missing something?

tajo commented

The whole point of PortalWithState is the fact that it controls its own state. That always comes with some compromises. We could add more "hooks" into it - onBeforeOpen, onBeforeClose. I am open to discuss that if somebody provides a PR with tests.

Generally I would recommend to just use <Portal /> for the full control.

eliseumds commented

That makes sense. Maybe we could have another component called SmartPortal that takes care of conditionally rendering the portal, closeOnEsc and closeOnOutsideClick, with zero state.

tajo commented

PortalWithState is fairly simple implementation using <Portal / >. I will always recommend to build your own PortalWithState if ours doesn't fit your needs.