diff --git a/packages/e2e-test-utils/src/disable-pre-publish-checks.js b/packages/e2e-test-utils/src/disable-pre-publish-checks.js index db299383b3511f..099ad81959c748 100644 --- 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 index 92220fbbe8f8ba..0f68f9673acbb7 100644 --- 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 index 07b413c1dae326..d66f557fec1751 100644 --- 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 index 55479ce6b9efaf..ed8119cb0d1158 100644 --- 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 } >

{ children }

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 index 192cfe76fb74e5..c7e04b79aaf56b 100644 --- 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" >