diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
index 96f17b86326b42..859a946a53bf72 100644
--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -7,7 +7,7 @@ import warning from 'warning';
import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
import EventListener from 'react-event-listener';
import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
+import { chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils';
import ownerDocument from '../utils/ownerDocument';
import ownerWindow from '../utils/ownerWindow';
import { createChainedFunction } from '../utils/helpers';
@@ -348,6 +348,7 @@ class Popover extends React.Component {
data-mui-test="Popover"
elevation={elevation}
ref={ref => {
+ // #StrictMode ready
this.paperRef = ReactDOM.findDOMNode(ref);
}}
{...PaperProps}
@@ -521,7 +522,9 @@ Popover.propTypes = {
/**
* Properties applied to the [`Paper`](/api/paper/) element.
*/
- PaperProps: PropTypes.object,
+ PaperProps: PropTypes.shape({
+ component: elementTypeAcceptingRef,
+ }),
/**
* This is the point on the popover which
* will attach to the anchor's origin.
diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
index 34437881058d2c..d3091d03e0cabf 100644
--- a/packages/material-ui/src/Popover/Popover.test.js
+++ b/packages/material-ui/src/Popover/Popover.test.js
@@ -474,6 +474,15 @@ describe('', () => {
assert.include(consoleErrorMock.args()[0][0], 'It should be a HTMLElement instance');
});
+ it('warns if a component for the Paper is used that cant hold a ref', () => {
+ mount( , elevation: 4 }} />);
+ assert.strictEqual(consoleErrorMock.callCount(), 1);
+ assert.include(
+ consoleErrorMock.args()[0][0],
+ 'Warning: Failed prop type: Invalid prop `PaperProps.component` supplied to `Popover`',
+ );
+ });
+
// it('should warn if anchorEl is not visible', () => {
// mount();
// assert.strictEqual(consoleErrorMock.callCount(), 1);
diff --git a/pages/api/popover.md b/pages/api/popover.md
index ce5dc86990b0b8..49a52e4bd1609e 100644
--- a/pages/api/popover.md
+++ b/pages/api/popover.md
@@ -38,7 +38,7 @@ import Popover from '@material-ui/core/Popover';
| onExited | func | | Callback fired when the component has exited. |
| onExiting | func | | Callback fired when the component is exiting. |
| open * | bool | | If `true`, the popover is visible. |
-| PaperProps | object | | Properties applied to the [`Paper`](/api/paper/) element. |
+| PaperProps | { component?: element type } | | Properties applied to the [`Paper`](/api/paper/) element. |
| transformOrigin | { horizontal: union: number |
enum: 'left' |
'center' |
'right'
, vertical: union: number |
enum: 'top' |
'center' |
'bottom'
} | { vertical: 'top', horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
| TransitionComponent | elementType | Grow | The component used for the transition. |
| transitionDuration | union: number |
{ enter?: number, exit?: number } |
enum: 'auto'
| 'auto' | Set to 'auto' to automatically calculate transition time based on height. |