[Popover] Scroll Container issue (#7472)

* #4783
- As discussed on mui/material-ui#4393 and mui/material-ui#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

@@ -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}
         />