Clicking anywhere on the page causes an error when portal is open
tomalexhughes opened this issue · 2 comments
With the following code opening an closing a portal works fine, however any click on the page outputs the following error:
Uncaught TypeError: Cannot read property 'contains' of null
at Portal.handleOutsideMouseClick (portal.js:162)
handleOutsideMouseClick @ portal.js:162
The close button I have placed inside my modal component works, but outputs the above error, clicking elsewhere will cause the error, and clicking outside the modal does not close it. With the only way to close it being via the escape key.
Currently runnning:
"react-portal": "^3.2.0"
"react": "^16.0.0"
Unsure as to whether it is user error and I am missing an option, or a bug?
import React from 'react';
import PropTypes from 'prop-types';
import Portal from 'react-portal';
import Modal from './Modal';
import FileUploadForm from './FileUploadForm';
const FileUploader = (props) => {
const fileUploadButton = (
<button className="button button-red button-upload file-input-label">
Upload File
</button>
);
return (
<div className="header-button">
<Portal isOpen closePortal closeOnEsc closeOnOutsideClick openByClickOn={fileUploadButton}>
<Modal title="Upload File">
<FileUploadForm updateUploadedFile={props.updateUploadedFile} />
</Modal>
</Portal>
</div>
);
};
FileUploader.propTypes = {
updateUploadedFile: PropTypes.func.isRequired
};
export default FileUploader;
import React from 'react';
import PropTypes from 'prop-types';
const Modal = (props) => (
<div className="modal">
<div className="modal-header">
<h1>{props.title}</h1>
<div className="modal-controls">
<button onClick={() => props.closePortal()} className="button grey-button" type="button">
<i className="fa fa-close" /> Close
</button>
</div>
</div>
<div className="modal-body">
{props.children}
</div>
</div>
);
Modal.propTypes = {
title: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
closePortal: PropTypes.func.isRequired
};
export default Modal;
You should be using the RC because it supports react 16.
Thanks! I missed the line in the documentation stating the docs were for version 4 and presumed the docs were for the latest stable release.