Merge pull request Shopify#1700 from Shopify/mo-po

Cherry-pick change from v4 to master

.eslintignore

@@ -9,3 +9,4 @@ node_modules
 /styles.scss
 /styles
 /src/styles/polaris-tokens
+tests/shims/mutation-observer.ts

UNRELEASED.md

@@ -40,6 +40,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Updated `PositionedOverlay` to no longer use `componentWillReceiveProps`([#1621](https://github.com/Shopify/polaris-react/pull/1621))
+
 ### Deprecations
 
 - `Card` `secondaryFooterAction` is now deprecated. Set an array of secondary actions on the `secondaryFooterActions` prop instead [#1625](https://github.com/Shopify/polaris-react/pull/1625)

src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -52,6 +52,8 @@ export interface State {
   lockPosition: boolean;
 }
 
+const OBSERVER_CONFIG = {childList: true, subtree: true};
+
 export default class PositionedOverlay extends React.PureComponent<
   Props,
   State
@@ -71,6 +73,13 @@ export default class PositionedOverlay extends React.PureComponent<
 
   private overlay: HTMLElement | null = null;
   private scrollableContainer: HTMLElement | Document | null = null;
+  private observer: MutationObserver;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.observer = new MutationObserver(this.handleMeasurement);
+  }
 
   componentDidMount() {
     this.scrollableContainer = Scrollable.forNode(this.props.activator);
@@ -92,10 +101,6 @@ export default class PositionedOverlay extends React.PureComponent<
     }
   }
 
-  componentWillReceiveProps() {
-    this.handleMeasurement();
-  }
-
   componentDidUpdate() {
     const {outsideScrollableContainer, top} = this.state;
     const {onScrollOut, active} = this.props;
@@ -153,6 +158,8 @@ export default class PositionedOverlay extends React.PureComponent<
   private handleMeasurement = () => {
     const {lockPosition, top} = this.state;
 
+    this.observer.disconnect();
+
     this.setState(
       ({left, top}) => ({
         left,
@@ -220,23 +227,29 @@ export default class PositionedOverlay extends React.PureComponent<
           preferredAlignment,
         );
 
-        this.setState({
-          measuring: false,
-          activatorRect: getRectForNode(activator),
-          left: horizontalPosition,
-          top: lockPosition ? top : verticalPosition.top,
-          lockPosition: Boolean(fixed),
-          height: verticalPosition.height || 0,
-          width: fullWidth ? overlayRect.width : null,
-          positioning: verticalPosition.positioning as Positioning,
-          outsideScrollableContainer:
-            onScrollOut != null &&
-            rectIsOutsideOfRect(
-              activatorRect,
-              intersectionWithViewport(scrollableContainerRect),
-            ),
-          zIndex,
-        });
+        this.setState(
+          {
+            measuring: false,
+            activatorRect: getRectForNode(activator),
+            left: horizontalPosition,
+            top: lockPosition ? top : verticalPosition.top,
+            lockPosition: Boolean(fixed),
+            height: verticalPosition.height || 0,
+            width: fullWidth ? overlayRect.width : null,
+            positioning: verticalPosition.positioning as Positioning,
+            outsideScrollableContainer:
+              onScrollOut != null &&
+              rectIsOutsideOfRect(
+                activatorRect,
+                intersectionWithViewport(scrollableContainerRect),
+              ),
+            zIndex,
+          },
+          () => {
+            if (!this.overlay) return;
+            this.observer.observe(this.overlay, OBSERVER_CONFIG);
+          },
+        );
       },
     );
   };

tests/setup.ts

@@ -1,5 +1,6 @@
 import {configure} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import './shims/mutation-observer';
 
 configure({adapter: new Adapter()});