added updatePosition to Popover after table row content updates

gregnb · Jan 1, 2018 · baceb9f · baceb9f
1 parent 533a818
commit baceb9f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/example/index.js b/example/index.js
@@ -41,18 +41,6 @@ class Example extends React.Component {
       ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
     ];
 
-    // options: PropTypes.shape({
-    //   sort: PropTypes.bool,
-    //   filter: PropTypes.bool,
-    //   filterType: PropTypes.oneOf(['dropdown', 'checkbox']),
-    //   pagination: PropTypes.bool,
-    //   rowHover: PropTypes.bool,
-    //   rowsPerPage: PropTypes.number,
-    //   rowsPerPageOptions: PropTypes.array,
-    //   search: PropTypes.bool,
-    //   print: PropTypes.bool,
-    //   responsive: PropTypes.bool      
-    // }),
 
     const options = {
       filter: true,

diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
@@ -21,7 +21,9 @@ const arrowIcon = {
   display: "block",
   paddingBottom: "1px",
   "& svg": {
-    width: "100%",
+    width: "8px",
+    height: "5px",
+    verticalAlign: "top",
     "& path": {
       fillOpacity: 0.35,
     },

diff --git a/src/MUIPopover/MUIPopover.js b/src/MUIPopover/MUIPopover.js
@@ -50,6 +50,17 @@ class MUIPopover extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    /*  
+     * Update Popover position if a filter removes data from the table because
+     * it affects the window height which would cause the Popover to in the wrong place
+     */
+    if (this.state.open === true) {
+      this.anchorEl = findDOMNode(this.anchorEl);
+      this.popoverActions.updatePosition();
+    }
+  }
+
   handleClick = () => {
     this.anchorEl = findDOMNode(this.anchorEl);
     this.setState({ open: true });
@@ -84,6 +95,7 @@ class MUIPopover extends React.Component {
 
         const popoverContent = (
           <Popover
+            action={actions => (this.popoverActions = actions)}
             key={index}
             elevation={2}
             open={this.state.open}