From 26b75c8c36c993da50d52b42e562b6dc79438690 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 9 Aug 2017 19:03:01 -0400
Subject: [PATCH] Inserter: Leverage Popover isOpen to focus search

---
 editor/inserter/index.js | 16 ++++++++--------
 editor/inserter/menu.js  | 14 ++++----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/editor/inserter/index.js b/editor/inserter/index.js
index 943abb8437cbb..ca4c25f4935d5 100644
--- a/editor/inserter/index.js
+++ b/editor/inserter/index.js
@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { IconButton } from '@wordpress/components';
+import { Popover, IconButton } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
 import { bumpStat } from '@wordpress/utils';
 
@@ -86,13 +86,13 @@ class Inserter extends Component {
 				>
 					{ children }
 				</IconButton>
-				{ opened && (
-					<InserterMenu
-						position={ position }
-						onSelect={ this.insertBlock }
-						onClose={ this.closeOnClickOutside }
-					/>
-				) }
+				<Popover
+					isOpen={ opened }
+					position={ position }
+					onClose={ this.closeOnClickOutside }
+				>
+					<InserterMenu onSelect={ this.insertBlock } />
+				</Popover>
 			</div>
 		);
 	}
diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js
index 0c3ebf08c90e4..fdd700fc9dd29 100644
--- a/editor/inserter/menu.js
+++ b/editor/inserter/menu.js
@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Popover, withFocusReturn, withInstanceId, withSpokenMessages } from '@wordpress/components';
+import { withFocusReturn, withInstanceId, withSpokenMessages } from '@wordpress/components';
 import { keycodes } from '@wordpress/utils';
 import { getCategories, getBlockTypes, BlockIcon } from '@wordpress/blocks';
 
@@ -314,22 +314,17 @@ export class InserterMenu extends Component {
 	}
 
 	render() {
-		const { position, onClose, instanceId } = this.props;
+		const { instanceId } = this.props;
 		const isSearching = this.state.filterValue;
 		const visibleBlocksByCategory = this.getVisibleBlocksByCategory( this.getBlocksForCurrentTab() );
 
 		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
-			<Popover
-				position={ position }
-				isOpen
-				onClose={ onClose }
-				className="editor-inserter__menu">
+			<div className="editor-inserter__menu">
 				<label htmlFor={ `editor-inserter__search-${ instanceId }` } className="screen-reader-text">
 					{ __( 'Search blocks' ) }
 				</label>
 				<input
-					autoFocus
 					id={ `editor-inserter__search-${ instanceId }` }
 					type="search"
 					placeholder={ __( 'Search…' ) }
@@ -337,7 +332,6 @@ export class InserterMenu extends Component {
 					onChange={ this.filter }
 					onClick={ this.setSearchFocus }
 					ref={ this.bindReferenceNode( 'search' ) }
-					tabIndex="-1"
 				/>
 				<div role="menu" className="editor-inserter__content"
 					ref={ ( ref ) => this.tabContainer = ref }>
@@ -435,7 +429,7 @@ export class InserterMenu extends Component {
 						</button>
 					</div>
 				}
-			</Popover>
+			</div>
 		);
 		/* eslint-enable jsx-a11y/no-autofocus */
 	}