Components: Remove redundant onClickOutside handler from Dropdown (Wo…

…rdPress#11253)

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,15 +75,14 @@ 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
 						className={ contentClassName }
 						ref={ this.popoverRef }
 						position={ position }
 						onClose={ this.close }
-						onClickOutside={ this.clickOutside }
 						expandOnMobile={ expandOnMobile }
 						headerTitle={ headerTitle }
 					>