Improve DotTip positioning fix (#7219)

Add an official refresh() method to Popover so that DotTip can call this instead
of relying on internal Popover methods.

components/popover/README.md

@@ -103,17 +103,23 @@ Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to
  - Required: No
  - Default: `false`
 
- ## headerTitle
+ ### headerTitle
 
  Set this to customize the text that is shown in popover's header when it is fullscreen on mobile.
 
  - Type: `String`
  - Required: No
 
- ## noArrow
+ ### noArrow
 
  Set this to hide the arrow which visually indicates what the popover is anchored to. Note that the arrow will not display if `position` is set to `"middle center"`.
 
  - Type: `Boolean`
  - Required: No
  - Default: `false`
+
+## Methods
+
+### refresh
+
+Calling `refresh()` will force the Popover to recalculate its size and position. This is useful when a DOM change causes the anchor node to change position.

components/popover/index.js

@@ -60,9 +60,8 @@ class Popover extends Component {
 	}
 
 	componentDidMount() {
-		const popoverSize = this.updatePopoverSize();
-		this.computePopoverPosition( popoverSize );
 		this.toggleWindowEvents( true );
+		this.refresh();
 		this.focus();
 	}
 
@@ -91,6 +90,11 @@ class Popover extends Component {
 		this.rafHandle = window.requestAnimationFrame( () => this.computePopoverPosition() );
 	}
 
+	refresh() {
+		const popoverSize = this.updatePopoverSize();
+		this.computePopoverPosition( popoverSize );
+	}
+
 	focus() {
 		const { focusOnMount = true } = this.props;
 		if ( ! focusOnMount ) {

nux/components/dot-tip/index.js

@@ -25,15 +25,13 @@ export class DotTip extends Component {
 
 	componentDidMount() {
 		if ( this.props.isVisible ) {
-			// Force the popover to recalculate its position on the next frame. This is a
-			// Temporary workaround to fix the tip not appearing next to the inserter
-			// toggle on page load. This happens because the popover calculates its
-			// position before <PostTitle> is made visible, resulting in the position
-			// being too high on the page.
+			// Force the popover to recalculate its position on the next frame. This
+			// fixes the tip not appearing next to the inserter toggle on page load. This
+			// happens because the popover calculates its position before <PostTitle> is
+			// made visible, resulting in the position being too high on the page.
 			defer( () => {
 				const popover = this.popoverRef.current;
-				const popoverSize = popover.updatePopoverSize();
-				popover.computePopoverPosition( popoverSize );
+				popover.refresh();
 				popover.focus();
 			} );
 		}