Inserter: Fix default block slash inserter

components/autocomplete/index.js

@@ -183,6 +183,7 @@ class Autocomplete extends Component {
 		const { children, className } = this.props;
 		const { isOpen, selectedIndex } = this.state;
 		const classes = classnames( 'components-autocomplete__popover', className );
+		const filteredOptions = this.getFilteredOptions();
 
 		// Blur is applied to the wrapper node, since if the child is Editable,
 		// the event will not have `relatedTarget` assigned.
@@ -197,15 +198,16 @@ class Autocomplete extends Component {
 					onKeyDown: this.setSelectedIndex,
 				} ) }
 				<Popover
-					isOpen={ isOpen }
+					isOpen={ isOpen && filteredOptions.length > 0 }
+					focusOnOpen={ false }
 					position="top right"
 					className={ classes }
 				>
 					<ul
 						role="menu"
 						className="components-autocomplete__results"
 					>
-						{ this.getFilteredOptions().map( ( option, index ) => (
+						{ filteredOptions.map( ( option, index ) => (
 							<li
 								key={ option.value }
 								role="menuitem"

components/autocomplete/test/index.js

@@ -55,6 +55,7 @@ describe( 'Autocomplete', () => {
 			const popover = wrapper.find( 'Popover' );
 
 			expect( wrapper.state( 'isOpen' ) ).toBe( false );
+			expect( popover.prop( 'focusOnOpen' ) ).toBe( false );
 			expect( popover.hasClass( 'my-autocomplete' ) ).toBe( true );
 			expect( popover.hasClass( 'components-autocomplete__popover' ) ).toBe( true );
 			expect( wrapper.hasClass( 'components-autocomplete' ) ).toBe( true );
@@ -77,9 +78,29 @@ describe( 'Autocomplete', () => {
 			expect( wrapper.state( 'isOpen' ) ).toBe( true );
 			expect( wrapper.state( 'selectedIndex' ) ).toBe( 0 );
 			expect( wrapper.state( 'search' ) ).toEqual( /b/i );
+			expect( wrapper.find( 'Popover' ).prop( 'isOpen' ) ).toBe( true );
 			expect( wrapper.find( '.components-autocomplete__result' ) ).toHaveLength( 1 );
 		} );
 
+		it( 'does not render popover as open if no results', () => {
+			const wrapper = shallow(
+				<Autocomplete options={ options }>
+					<div contentEditable />
+				</Autocomplete>
+			);
+			const clone = wrapper.find( '[contentEditable]' );
+
+			clone.simulate( 'input', {
+				target: {
+					textContent: 'zzz',
+				},
+			} );
+
+			expect( wrapper.state( 'isOpen' ) ).toBe( true );
+			expect( wrapper.find( 'Popover' ).prop( 'isOpen' ) ).toBe( false );
+			expect( wrapper.find( '.components-autocomplete__result' ) ).toHaveLength( 0 );
+		} );
+
 		it( 'opens on trigger prefix search', () => {
 			const wrapper = shallow(
 				<Autocomplete options={ options } triggerPrefix="/">
@@ -214,8 +235,7 @@ describe( 'Autocomplete', () => {
 			const preventDefault = jest.fn();
 			const stopImmediatePropagation = jest.fn();
 			const wrapper = shallow(
-				<Autocomplete options={ options } triggerPrefix="/"
-				>
+				<Autocomplete options={ options } triggerPrefix="/">
 					<div contentEditable />
 				</Autocomplete>
 			);

components/popover/README.md

@@ -45,7 +45,23 @@ render(
 
 ## Props
 
-The component accepts the following props:
+The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
+
+### isOpen
+
+As a controlled component, it is expected that you will pass `isOpen` to control whether the popover is visible. Refer to the `onClose` documentation for the complementary behavior for determining when this value should be toggled in your parent component state.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
+### focusOnOpen
+
+By default, the popover will receive focus when it transitions from closed to open. To suppress this behavior, assign `focusOnOpen` to `true`. This should only be assigned when an appropriately accessible substitute behavior exists.
+
+- Type: `Boolean`
+- Required: No
+- Default: `true`
 
 ### position
 

components/popover/index.js

@@ -97,6 +97,11 @@ export class Popover extends Component {
 	}
 
 	focus() {
+		const { focusOnOpen = true } = this.props;
+		if ( ! focusOnOpen ) {
+			return;
+		}
+
 		const { content, popover } = this.nodes;
 		if ( ! content ) {
 			return;
@@ -200,14 +205,15 @@ export class Popover extends Component {
 		const {
 			isOpen,
 			onClose,
+			children,
+			className,
 			onClickOutside = onClose,
 			// Disable reason: We generate the `...contentProps` rest as remainder
 			// of props which aren't explicitly handled by this component.
-			//
-			// eslint-disable-next-line no-unused-vars
+			/* eslint-disable no-unused-vars */
 			position,
-			children,
-			className,
+			focusOnOpen,
+			/* eslint-enable no-unused-vars */
 			...contentProps
 		} = this.props;
 		const [ yAxis, xAxis ] = this.getPositions();

components/popover/test/index.js

@@ -67,6 +67,27 @@ describe( 'Popover', () => {
 			expect( mocks.setOffset ).toHaveBeenCalled();
 			expect( mocks.setForcedPositions ).not.toHaveBeenCalled();
 		} );
+
+		it( 'should focus when opening', () => {
+			// An ideal test here would mount with an input child and focus the
+			// child, but in context of JSDOM the inputs are not visible and
+			// are therefore skipped as tabbable, defaulting to popover.
+			wrapper = mount( <Popover /> );
+			wrapper.setProps( { isOpen: true } );
+
+			const popover = wrapper.find( '.components-popover' ).getDOMNode();
+
+			expect( document.activeElement ).toBe( popover );
+		} );
+
+		it( 'should allow focus-on-open behavior to be disabled', () => {
+			const activeElement = document.activeElement;
+
+			wrapper = mount( <Popover focusOnOpen={ false } /> );
+			wrapper.setProps( { isOpen: true } );
+
+			expect( document.activeElement ).toBe( activeElement );
+		} );
 	} );
 
 	describe( '#getPositions()', () => {

components/tooltip/index.js

@@ -104,6 +104,7 @@ class Tooltip extends Component {
 				child.props.children,
 				<Popover
 					isOpen={ isOver }
+					focusOnOpen={ false }
 					position={ position }
 					className="components-tooltip"
 					aria-hidden="true"

components/tooltip/test/index.js

@@ -38,6 +38,7 @@ describe( 'Tooltip', () => {
 			expect( button.childAt( 0 ).text() ).toBe( 'Hover Me!' );
 			expect( button.childAt( 1 ).name() ).toBe( 'Popover' );
 			expect( popover.prop( 'isOpen' ) ).toBe( false );
+			expect( popover.prop( 'focusOnOpen' ) ).toBe( false );
 			expect( popover.prop( 'position' ) ).toBe( 'bottom right' );
 			expect( popover.children().text() ).toBe( 'Help Text' );
 		} );