cloudflare / cloudflare/react-modal2
Animated example breaks with multiple dialogs
- Dominant language
- JavaScript
- Stars
- 275
- Forks
- 16
- PR merge metrics
- No merged PRs in 30d
Description
When rendering multiple modal dialogs based on the example in https://github.com/cloudflare/react-modal2/blob/master/example/animated/script.js only one of them will ever work, as only a single component can be rendered into a given GatewayDest. This applies even if one one modal is ever opened at a time, so long as there is more than one instance of the app-specific `Modal` class.
As a workaround I'm using `CSSTransitionGroup` as the tagName for GatewayDest so that the transition group is always rendered, which works as long as at most one modal is rendered into it at any given time.
Here's the code I'm using
```
const Modal = propTypes({
onBackgroundClick: PropTypes.func,
show: PropTypes.bool.isRequired,
children: PropTypes.node,
className: PropTypes.string
})(defaultProps({
onBackgroundClick: event => void 0
})(props => {
const { show, children, className, onBackgroundClick } = props;
return show ?
{ children }
:
}));
export class ModalWrapper extends Component {
static init() {
ReactModal.getApplicationElement = () => document.getElementById('app-content');
}
render() {
return
{this.props.children}
;
}
}
```
Note that the above produces a bogus prop type warning in development mode because the `tagName` proptype is set as `string` even though any value suitable for `React.createElement` is accepted.
Contributor guide
Assessment
This issue has not been assessed yet.