Clean up user selection and search.

WordPress · Jun 19, 2020 · d679caa · d679caa
1 parent 9061e9b
commit d679caa
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
@@ -1,17 +1,18 @@
-/* eslint-disable no-console */
-
 /**
  * External dependencies
  */
 import { useCombobox } from 'downshift';
 import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
 import { __ } from '@wordpress/i18n';
-import { Spinner } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { Button, Dashicon } from '../';
+import { Button, Dashicon, Spinner } from '../';
 
 const itemToString = ( item ) => item && item.name;
 export default function ComboboxControl( {

diff --git a/packages/editor/src/components/post-author/enhanced-post-author.js b/packages/editor/src/components/post-author/enhanced-post-author.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -9,11 +14,6 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import ComboboxControl from '../../../../components/build/combobox-control/';
 
-/**
- * External dependencies
- */
-import { debounce } from 'lodash';
-
 function EnhancedPostAuthor( { postAuthor, id, authors, onUpdateAuthor } ) {
 	const currentPostAuthor = postAuthor[ 0 ];
 	let initialAuthors = [];
@@ -31,9 +31,11 @@ function EnhancedPostAuthor( { postAuthor, id, authors, onUpdateAuthor } ) {
 
 	// Ensure the current author is included in the initial dropdown list.
 	let foundAuthor = initialAuthors.findIndex(
-		( author ) => currentPostAuthor.id === author.id
+		( author ) => currentPostAuthor && currentPostAuthor.id === author.id
 	);
-	if ( foundAuthor < 0 ) {
+
+	if ( currentPostAuthor && foundAuthor < 0 ) {
+		currentPostAuthor.key = initialAuthors.length;
 		initialAuthors = [ currentPostAuthor, ...initialAuthors ];
 		foundAuthor = 0;
 	}
@@ -51,11 +53,6 @@ function EnhancedPostAuthor( { postAuthor, id, authors, onUpdateAuthor } ) {
 	// The currently selected author.
 	const [ selectedAuthor, setSelectedAuthor ] = useState( currentPostAuthor );
 
-	// Wait until we have the post author before displaying the component.
-	if ( 0 === postAuthor.length ) {
-		return null;
-	}
-
 	/**
 	 * Handle author selection.
 	 *
@@ -69,7 +66,7 @@ function EnhancedPostAuthor( { postAuthor, id, authors, onUpdateAuthor } ) {
 	/**
 	 * Handle user input.
 	 *
-	 * @param {Object} param0 Contains a single property `inputValue` with the string value of the input field.
+	 * @param {string} inputValue The current value of the input field.
 	 */
 	const handleKeydown = ( { inputValue } ) => {
 		if ( '' === inputValue ) {
@@ -89,7 +86,7 @@ function EnhancedPostAuthor( { postAuthor, id, authors, onUpdateAuthor } ) {
 	const searchAuthors = debounce( ( query ) => {
 		const payload = '?search=' + encodeURIComponent( query );
 		setIsLoadingSearchResult( true );
-		apiFetch( { path: '/wp/v2/users' + payload } ).done( ( results ) => {
+		apiFetch( { path: '/wp/v2/users' + payload } ).then( ( results ) => {
 			setAvailableAuthors(
 				results.map( ( author, i ) => ( {
 					key: i,
@@ -100,12 +97,12 @@ function EnhancedPostAuthor( { postAuthor, id, authors, onUpdateAuthor } ) {
 			);
 			setIsLoadingSearchResult( false );
 		} );
-	}, 150 );
+	}, 300 );
 
 	return (
 		<ComboboxControl
 			id={ id }
-			isLoadingSearchResults={ isLoadingSearchResults }
+			isLoading={ isLoadingSearchResults }
 			options={ availableAuthors }
 			initialHighlightedIndex={ foundAuthor }
 			initialInputValue={ selectedAuthor.name }

diff --git a/packages/editor/src/components/post-author/index.js b/packages/editor/src/components/post-author/index.js
@@ -6,11 +6,11 @@ import { withInstanceId, compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import EnhancedPostAuthor from './enhanced-post-author';
 /**
  * Internal dependencies
  */
 import PostAuthorCheck from './check';
+import EnhancedPostAuthor from './enhanced-post-author';
 
 export class PostAuthor extends Component {
 	constructor() {
@@ -35,6 +35,11 @@ export class PostAuthor extends Component {
 		} = this.props;
 		const selectId = 'post-author-selector-' + instanceId;
 
+		// Wait until we have the post author before displaying the component.
+		if ( 0 === postAuthor.length ) {
+			return null;
+		}
+
 		// Disable reason: A select with an onchange throws a warning
 
 		/* eslint-disable jsx-a11y/no-onchange */