Components: Refactor Dropdown to use onFocusOutside

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 }