From 58725c42980f81dbcf18d921be7ca43507c968e0 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 31 Oct 2018 08:40:35 -0400
Subject: [PATCH] Components: Remove redundant onClickOutside handler from
 Dropdown (#11253)

---
 packages/components/src/dropdown/index.js | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
index c8ba61f4ad18..c99c0c3e8ea4 100644
--- a/packages/components/src/dropdown/index.js
+++ b/packages/components/src/dropdown/index.js
@@ -11,12 +11,13 @@ import Popover from '../popover';
 class Dropdown extends Component {
 	constructor() {
 		super( ...arguments );
+
 		this.toggle = this.toggle.bind( this );
 		this.close = this.close.bind( this );
-		this.clickOutside = this.clickOutside.bind( this );
-		this.bindContainer = this.bindContainer.bind( this );
 		this.refresh = this.refresh.bind( this );
+
 		this.popoverRef = createRef();
+
 		this.state = {
 			isOpen: false,
 		};
@@ -38,10 +39,6 @@ class Dropdown extends Component {
 		}
 	}
 
-	bindContainer( ref ) {
-		this.container = ref;
-	}
-
 	/**
 	 * When contents change height due to user interaction,
 	 * `refresh` can be called to re-render Popover with correct
@@ -59,12 +56,6 @@ class Dropdown extends Component {
 		} ) );
 	}
 
-	clickOutside( event ) {
-		if ( ! this.container.contains( event.target ) ) {
-			this.close();
-		}
-	}
-
 	close() {
 		this.setState( { isOpen: false } );
 	}
@@ -84,7 +75,7 @@ class Dropdown extends Component {
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
 
 		return (
-			<div className={ className } ref={ this.bindContainer }>
+			<div className={ className }>
 				{ renderToggle( args ) }
 				{ isOpen && (
 					<Popover
@@ -92,7 +83,6 @@ class Dropdown extends Component {
 						ref={ this.popoverRef }
 						position={ position }
 						onClose={ this.close }
-						onClickOutside={ this.clickOutside }
 						expandOnMobile={ expandOnMobile }
 						headerTitle={ headerTitle }
 					>