Implement componentWillReceiveProps() in PortalWithState

[hinok]

Hey,
We have a case in one of our applications that:

1. we use react-portal as the abstraction for creating portals
2. we've implemented dropdowns, selects and modals on top of react-portal
3. we need to open a modal from a dropdown that is opened inside another modal 💃

For dropdowns and selects we use closeOnOutsideClick={true} as default because that is desired behaviour of dropdowns and selects, right? Right.

Problem
When we click inside a modal that is opened from the select, everything disappears because of event listeners added by closeOnOutsideClick={true} from our select component. Select is closed thus Modal is also closed.

The easy way to fix it is to remove or add event listeners based on the props inside PortalWithState. I created a proof-of-concept on my branch: https://github.com/hinok/react-portal/tree/feat/componentWillReceiveProps, here is the direct commit: hinok@2b21bd5

Example

componentWillReceiveProps(nextProps) {
  const shouldFlushListeners =
    nextProps.closeOnEsc !== this.props.closeOnEsc ||
    nextProps.closeOnOutsideClick !== this.props.closeOnOutsideClick;

  if (shouldFlushListeners) {
    this.removeEventListeners();
    this.addEventListeners(nextProps);
  }
}

@tajo If you think it's worth to implement it also in react-portal, I can polish this idea and create PR for that. What do you think?

[jakubwolny]

just FYI: componentWillReceiveProps will become deprecated in React@16.3 so I'd recommend against using it, maybe componentDidUpdate could be used instead?

[hinok]

@hamczu Sure, this can be done also in componentDidUpdate, thanks for pointing this out 👍

[tajo]

Yea, I get the use-case but this seems pretty complicated & unique and I don't feel like maintaining it here. As always in similar cases, I would recommend to build your own <PortalWithState /> like abstraction on top of <Portal />. <PortalWithState> doesn't aspire to solve everyone's problems.