Popper faked reference object props validation fails

[dan8f]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

anchorEl prop to validate when a faked reference object is passed.

Current Behavior 😯

Validation fails.

"Warning: Failed prop type: Material-UI: the anchorEl prop provided to the component is invalid.
It should be an Element instance but it's [object Object] instead."

Steps to Reproduce 🕹

Check the documentation example: https://material-ui.com/components/popper/#faked-reference-object

The codesandbox in the documentation reproduces the failure https://codesandbox.io/s/hp8d5

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.0.1
React	16.8.1
Browser
TypeScript
etc.

[eps1lon]

Sounds like PropTypes.shap would be the better candidate here. Our typescript types need adjustment as well though and I'm not sure where we draw the boundary. If we only require the properties we currently use we might block important bug fixes in the future (layout computation is always a bit tricky across browsers).

Would like to see a proposal for a shape that we require in anchorEl and then we can discuss what we should add just to be safe.

[oliviertassinari]

@dan8f Thanks for raising the problem. Would you be interested in opening a pull request?
@eps1lon I would propose the following diff. Does it look good to you?:

diff --git a/packages/material-ui/src/Popper/Popper.d.ts b/packages/material-ui/src/Popper/Popper.d.ts
index 2e005a805..511a9d492 100644
--- a/packages/material-ui/src/Popper/Popper.d.ts
+++ b/packages/material-ui/src/Popper/Popper.d.ts
@@ -19,7 +19,7 @@ export type PopperPlacementType =

 export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
   transition?: boolean;
-  anchorEl?: null | Element | ReferenceObject | (() => Element);
+  anchorEl?: null | Element | ReferenceObject | (() => Element | ReferenceObject);
   children:
     | React.ReactNode
     | ((props: {
diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
index 7d48d99ae..97a4a9f13 100644
--- a/packages/material-ui/src/Popper/Popper.js
+++ b/packages/material-ui/src/Popper/Popper.js
@@ -191,11 +191,16 @@ Popper.propTypes = {
             ].join('\n'),
           );
         }
-      } else {
+      } else if (
+        typeof resolvedAnchorEl.clientWidth !== 'number' ||
+        typeof resolvedAnchorEl.clientHeight !== 'number' ||
+        typeof resolvedAnchorEl.getBoundingClientRect !== 'function'
+      ) {
         return new Error(
           [
             'Material-UI: the `anchorEl` prop provided to the component is invalid.',
-            `It should be an Element instance but it's \`${resolvedAnchorEl}\` instead.`,
+            'It should be an Element instance or a referenceObject:',
+            'https://popper.js.org/popper-documentation.html#referenceObject.',
           ].join('\n'),
         );
       }