From f5ecc6374cceb1691d1906fabfb51dd6f295b163 Mon Sep 17 00:00:00 2001
From: chowdream <stephenchow9838@outlook.com>
Date: Fri, 21 Jul 2017 11:43:57 +0100
Subject: [PATCH] [Popover] Scroll Container issue (#7472)

* #4783
- As discussed on https://github.com/callemall/material-ui/issues/4393 and https://github.com/callemall/material-ui/issues/4783 I have provided a fix for popover position issue on autocomplete.

* Update Popover.js

* -Commented PR changes are applied
-Prop name is changed to a more meaningful name

* Update Popover.js

* Prop order is changed as alphabetical order

* redundant space removed

* redundant space is removed
---
 src/Popover/Popover.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
index a82fe3f150..f9e5c4dede 100644
--- a/src/Popover/Popover.js
+++ b/src/Popover/Popover.js
@@ -67,6 +67,14 @@ class Popover extends Component {
      * If true, the popover is visible.
      */
     open: PropTypes.bool,
+    /**
+     * Represents the parent scrollable container.
+     * It can be an element or a string like `window`.
+     */
+    scrollableContainer: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+    ]),
     /**
      * Override the inline-styles of the root element.
      */
@@ -101,6 +109,7 @@ class Popover extends Component {
     canAutoPosition: true,
     onRequestClose: () => {},
     open: false,
+    scrollableContainer: 'window',
     style: {
       overflowY: 'auto',
     },
@@ -304,8 +313,8 @@ class Popover extends Component {
       targetPosition = this.applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition);
     }
 
-    targetEl.style.top = `${Math.max(0, targetPosition.top)}px`;
-    targetEl.style.left = `${Math.max(0, targetPosition.left)}px`;
+    targetEl.style.top = `${targetPosition.top}px`;
+    targetEl.style.left = `${targetPosition.left}px`;
     targetEl.style.maxHeight = `${window.innerHeight}px`;
   };
 
@@ -395,7 +404,7 @@ class Popover extends Component {
     return (
       <div style={styles.root}>
         <EventListener
-          target="window"
+          target={this.props.scrollableContainer}
           onScroll={this.handleScroll}
           onResize={this.handleResize}
         />