Components: Refactor Dropdown to use onFocusOutside

Author: aduth

packages/components/CHANGELOG.md

@@ -15,6 +15,10 @@
 
 - The `Popover` component `onClickOutside` prop has been deprecated. Use `onFocusOutside` instead.
 
+### Internal
+
+- The `Dropdown` component has been refactored to focus changes using the `Popover` component's `onFocusOutside` prop.
+
 ## 7.2.0 (2019-03-20)
 
 ### Improvements

packages/components/src/dropdown/index.js

@@ -14,7 +14,7 @@ class Dropdown extends Component {
 
 		this.toggle = this.toggle.bind( this );
 		this.close = this.close.bind( this );
-		this.closeIfClickOutside = this.closeIfClickOutside.bind( this );
+		this.closeIfFocusOutside = this.closeIfFocusOutside.bind( this );
 
 		this.containerRef = createRef();
 
@@ -46,15 +46,13 @@ 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`.
+	 * Closes the dropdown if a focus leaves the dropdown wrapper. This is
+	 * intentionally distinct from `onClose` since focus loss from the popover
+	 * is expected to occur when using the Dropdown's toggle button, in which
+	 * case the correct behavior is to keep the dropdown closed.
 	 */
-	closeIfClickOutside( event ) {
-		if ( ! this.containerRef.current.contains( event.target ) ) {
+	closeIfFocusOutside() {
+		if ( ! this.containerRef.current.contains( document.activeElement ) ) {
 			this.close();
 		}
 	}
@@ -86,7 +84,7 @@ class Dropdown extends Component {
 						className={ contentClassName }
 						position={ position }
 						onClose={ this.close }
-						onClickOutside={ this.closeIfClickOutside }
+						onFocusOutside={ this.closeIfFocusOutside }
 						expandOnMobile={ expandOnMobile }
 						headerTitle={ headerTitle }
 						focusOnMount={ focusOnMount }