Repository: mui/material-ui (TypeScript)
Date: 2019-07-30 10:23:00+00:00
Task type: Bug Fix

Issue:
[Popper] TypeError: handlePopperRefRef.current is not a function
<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior 🤔
The example from the codesandbox works.
<!---
    Describe what should happen.
-->

## Current Behavior 😯
When rendering `Popper` with initial `open=true` and `disablePortal=true` there is a TypeError error `handlePopperRefRef.current is not a function`.
<!---
    Describe what happens instead of the expected behavior.
-->

## Steps to Reproduce 🕹
https://codesandbox.io/s/mui-popper-handlepopperrefrefcurrent-is-not-a-function-r23ho

## Context 🔦
<!---
    What are you trying to accomplish? How has this issue affected you?
    Providing context helps us come up with a solution that is most useful in the real world.
-->
I have a use case when in some cases I render the popper inline initially opened without a portal. 

## Your Environment 🌎
It happens since release 4.3.0.

| Tech         | Version |
|--------------|---------|
| Material-UI  | v4.3.0  |



Issue discussion:
I would propose the following fix:
```diff
diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
index 150fc169a..1471e127a 100644
--- a/packages/material-ui/src/Popper/Popper.js
+++ b/packages/material-ui/src/Popper/Popper.js
@@ -61,8 +61,8 @@ const Popper = React.forwardRef(function Popper(props, ref) {
   const ownRef = useForkRef(tooltipRef, ref);

   const popperRef = React.useRef(null);
-  const handlePopperRefRef = React.useRef();
   const handlePopperRef = useForkRef(popperRef, popperRefProp);
+  const handlePopperRefRef = React.useRef(handlePopperRef);
   useEnhancedEffect(() => {
     handlePopperRefRef.current = handlePopperRef;
   }, [handlePopperRef]);
```
I will fix it. PR :soon: 

Solution patch:
diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
--- a/packages/material-ui/src/Popper/Popper.js
+++ b/packages/material-ui/src/Popper/Popper.js
@@ -61,8 +61,8 @@ const Popper = React.forwardRef(function Popper(props, ref) {
   const ownRef = useForkRef(tooltipRef, ref);
 
   const popperRef = React.useRef(null);
-  const handlePopperRefRef = React.useRef();
   const handlePopperRef = useForkRef(popperRef, popperRefProp);
+  const handlePopperRefRef = React.useRef(handlePopperRef);
   useEnhancedEffect(() => {
     handlePopperRefRef.current = handlePopperRef;
   }, [handlePopperRef]);


Test patch:
diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js
--- a/packages/material-ui/src/Popper/Popper.test.js
+++ b/packages/material-ui/src/Popper/Popper.test.js
@@ -222,6 +222,32 @@ describe('<Popper />', () => {
     });
   });
 
+  describe('prop: disablePortal', () => {
+    it('should work', () => {
+      const popperRef = React.createRef();
+      const wrapper = mount(<Popper {...defaultProps} disablePortal popperRef={popperRef} />);
+      // renders
+      assert.strictEqual(wrapper.find('[role="tooltip"]').exists(), true);
+      // correctly sets modifiers
+      assert.strictEqual(
+        popperRef.current.options.modifiers.preventOverflow.boundariesElement,
+        'scrollParent',
+      );
+    });
+
+    it('sets preventOverflow to window when disablePortal is false', () => {
+      const popperRef = React.createRef();
+      const wrapper = mount(<Popper {...defaultProps} popperRef={popperRef} />);
+      // renders
+      assert.strictEqual(wrapper.find('[role="tooltip"]').exists(), true);
+      // correctly sets modifiers
+      assert.strictEqual(
+        popperRef.current.options.modifiers.preventOverflow.boundariesElement,
+        'window',
+      );
+    });
+  });
+
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();