Components: Restore click-to-close behavior of Dropdown toggle (#11633)

* Testing: Correct truthy test of immediately saveable demo

Previously assumed the selector would throw if not found, but in-fact returns `null`.

See: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageselector

* Revert "Components: Remove redundant onClickOutside handler from Dropdown (#11253)"

This reverts commit 58725c4.

* Testing: Verify Popover toggle behavior

* Components: Document Dropdown click outside behavior

* Components: Convert Dropdown container to use createRef

packages/components/src/dropdown/index.js

@@ -14,8 +14,10 @@ class Dropdown extends Component {
 
 		this.toggle = this.toggle.bind( this );
 		this.close = this.close.bind( this );
+		this.closeIfClickOutside = this.closeIfClickOutside.bind( this );
 		this.refresh = this.refresh.bind( this );
 
+		this.containerRef = createRef();
 		this.popoverRef = createRef();
 
 		this.state = {
@@ -56,6 +58,20 @@ class Dropdown extends Component {
 		} ) );
 	}
 
+	/**
+	 * Closes the dropdown if a click occurs outside the dropdown wrapper. This
+	 * is intentionally distinct from `onClose` in that a click outside the
+	 * popover may occur in the toggling of the dropdown via its toggle button.
+	 * The correct behavior is to keep the dropdown closed.
+	 *
+	 * @param {MouseEvent} event Click event triggering `onClickOutside`.
+	 */
+	closeIfClickOutside( event ) {
+		if ( ! this.containerRef.current.contains( event.target ) ) {
+			this.close();
+		}
+	}
+
 	close() {
 		this.setState( { isOpen: false } );
 	}
@@ -75,14 +91,15 @@ class Dropdown extends Component {
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
 
 		return (
-			<div className={ className }>
+			<div className={ className } ref={ this.containerRef }>
 				{ renderToggle( args ) }
 				{ isOpen && (
 					<Popover
 						className={ contentClassName }
 						ref={ this.popoverRef }
 						position={ position }
 						onClose={ this.close }
+						onClickOutside={ this.closeIfClickOutside }
 						expandOnMobile={ expandOnMobile }
 						headerTitle={ headerTitle }
 					>

test/e2e/specs/demo.test.js

@@ -40,6 +40,6 @@ describe( 'new editor state', () => {
 	} );
 
 	it( 'should be immediately saveable', async () => {
-		await page.$( 'button.editor-post-save-draft' );
+		expect( await page.$( 'button.editor-post-save-draft' ) ).toBeTruthy();
 	} );
 } );

test/e2e/specs/popovers.test.js

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import { newPost } from '../support/utils';
+
+describe( 'popovers', () => {
+	beforeEach( async () => {
+		await newPost();
+	} );
+
+	describe( 'dropdown', () => {
+		it( 'toggles via click', async () => {
+			const isMoreMenuOpen = async () => !! await page.$( '.edit-post-more-menu__content' );
+
+			expect( await isMoreMenuOpen() ).toBe( false );
+
+			// Toggle opened.
+			await page.click( '.edit-post-more-menu > button' );
+			expect( await isMoreMenuOpen() ).toBe( true );
+
+			// Toggle closed.
+			await page.click( '.edit-post-more-menu > button' );
+			expect( await isMoreMenuOpen() ).toBe( false );
+		} );
+	} );
+} );