Fix: Dottips do not disappear when other parts of the editor are enga…

…ged. (#17663)
WordPress · Oct 4, 2019 · f68a107 · f68a107
1 parent 3d7e813
commit f68a107
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 3 deletions.
diff --git a/packages/e2e-test-utils/src/disable-pre-publish-checks.js b/packages/e2e-test-utils/src/disable-pre-publish-checks.js
@@ -2,10 +2,12 @@
  * Internal dependencies
  */
 import { toggleScreenOption } from './toggle-screen-option';
+import { toggleMoreMenu } from './toggle-more-menu';
 
 /**
  * Disables Pre-publish checks.
  */
 export async function disablePrePublishChecks() {
 	await toggleScreenOption( 'Pre-publish Checks', false );
+	await toggleMoreMenu();
 }
diff --git a/packages/e2e-test-utils/src/enable-pre-publish-checks.js b/packages/e2e-test-utils/src/enable-pre-publish-checks.js
@@ -2,10 +2,12 @@
  * Internal dependencies
  */
 import { toggleScreenOption } from './toggle-screen-option';
+import { toggleMoreMenu } from './toggle-more-menu';
 
 /**
  * Enables Pre-publish checks.
  */
 export async function enablePrePublishChecks() {
 	await toggleScreenOption( 'Pre-publish Checks', true );
+	await toggleMoreMenu();
 }
diff --git a/packages/e2e-test-utils/src/toggle-screen-option.js b/packages/e2e-test-utils/src/toggle-screen-option.js
@@ -3,7 +3,6 @@
  */
 import { clickOnCloseModalButton } from './click-on-close-modal-button';
 import { clickOnMoreMenuItem } from './click-on-more-menu-item';
-import { toggleMoreMenu } from './toggle-more-menu';
 
 /**
  * Toggles the screen option with the given label.
@@ -25,5 +24,4 @@ export async function toggleScreenOption( label, shouldBeChecked = undefined ) {
 	}
 
 	await clickOnCloseModalButton();
-	await toggleMoreMenu();
 }
diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js
@@ -5,6 +5,7 @@ import { compose } from '@wordpress/compose';
 import { Popover, Button, IconButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { useCallback, useRef } from '@wordpress/element';
 
 function getAnchorRect( anchor ) {
 	// The default getAnchorRect() excludes an element's top and bottom padding
@@ -27,6 +28,26 @@ export function DotTip( {
 	onDismiss,
 	onDisable,
 } ) {
+	const anchorParent = useRef( null );
+	const getAnchorRectCallback = useCallback(
+		( anchor ) => {
+			anchorParent.current = anchor.parentNode;
+			return getAnchorRect( anchor );
+		},
+		[ anchorParent ]
+	);
+	const onFocusOutsideCallback = useCallback(
+		( event ) => {
+			if ( ! anchorParent.current ) {
+				return;
+			}
+			if ( anchorParent.current.contains( event.relatedTarget ) ) {
+				return;
+			}
+			onDisable();
+		},
+		[ onDisable, anchorParent ]
+	);
 	if ( ! isVisible ) {
 		return null;
 	}
@@ -37,10 +58,11 @@ export function DotTip( {
 			position={ position }
 			noArrow
 			focusOnMount="container"
-			getAnchorRect={ getAnchorRect }
+			getAnchorRect={ getAnchorRectCallback }
 			role="dialog"
 			aria-label={ __( 'Editor tips' ) }
 			onClick={ onClick }
+			onFocusOutside={ onFocusOutsideCallback }
 		>
 			<p>{ children }</p>
 			<p>

diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -8,6 +8,7 @@ exports[`DotTip should render correctly 1`] = `
   getAnchorRect={[Function]}
   noArrow={true}
   onClick={[Function]}
+  onFocusOutside={[Function]}
   position="middle right"
   role="dialog"
 >