Inserter: Leverage Popover isOpen to focus search

WordPress · Aug 9, 2017 · 26b75c8 · 26b75c8
1 parent 487fe8b
commit 26b75c8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git 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
@@ -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,30 +314,24 @@ 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…' ) }
 					className="editor-inserter__search"
 					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 */
 	}