Merge pull request #3822 from metabase/less-aggressive-scrollIntoView

Only scroll AccordianList to selected element if it's not visible.

frontend/src/metabase/components/AccordianList.jsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 
 import cx from "classnames";
 import _ from "underscore";
+import { elementIsInView } from "metabase/lib/dom";
 
 import Icon from "metabase/components/Icon.jsx";
 import ListSearchField from "metabase/components/ListSearchField.jsx";
@@ -64,7 +65,7 @@ export default class AccordianList extends Component {
     componentDidMount() {
         // when the component is mounted and an item is selected then scroll to it
         const element = this.refs.selected && ReactDOM.findDOMNode(this.refs.selected);
-        if (element) {
+        if (element && !elementIsInView(element)) {
             element.scrollIntoView();
         }
     }

frontend/src/metabase/lib/dom.js

@@ -33,3 +33,24 @@ export function findPosition(element, excludeScroll = false) {
     }
     return offset;
 }
+
+// based on http://stackoverflow.com/a/38039019/113
+export function elementIsInView(element, percentX = 1, percentY = 1) {
+    const tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
+
+    const elementRect = element.getBoundingClientRect();
+    const parentRects = [];
+
+    while (element.parentElement != null) {
+        parentRects.push(element.parentElement.getBoundingClientRect());
+        element = element.parentElement;
+    }
+
+    return parentRects.every((parentRect) => {
+        const visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
+        const visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
+        const visiblePercentageX = visiblePixelX / elementRect.width;
+        const visiblePercentageY = visiblePixelY / elementRect.height;
+        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
+    });
+}