Author select improvements (#924)

* Delay author search query by wrapping with debounce

* Clear suggestions if query length does not meet threshold limit

* Fix author name overalp issue

* Fix author name overlap issue

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-api-fetch', 'wp-components', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => 'a701630770e7f696061b');
+<?php return array('dependencies' => array('wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives'), 'version' => 'de96828f162fe468c4aa');

css/co-authors-plus.css

@@ -109,3 +109,10 @@
 			margin-left: 30px;
 			font-size: 13px;
 		}
+
+.cap-author .cap-author-flex-item:nth-child(2) {
+	min-width: 75px;
+}
+.cap-author .cap-author-flex-item:first-child {
+    overflow-wrap: break-word;
+}

src/components/author-selection/index.jsx

@@ -61,11 +61,11 @@ const AuthorsSelection = ( { selectedAuthors, updateAuthors } ) => {
 
 		return (
 			<div key={ value } className="cap-author">
-				<Flex align="center">
-					<FlexItem>
+				<Flex align="flex-start">
+					<FlexItem className="cap-author-flex-item">
 						<span>{ display }</span>
 					</FlexItem>
-					<FlexItem justify="flex-end">
+					<FlexItem justify="flex-end" className="cap-author-flex-item">
 						<Flex>
 							<div className="cap-icon-button-stack">
 								<Button

src/components/co-authors/index.jsx

@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 import { useDispatch, useSelect, register } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
 
 /**
  * Components
@@ -125,11 +126,12 @@ const CoAuthors = () => {
 	 *
 	 * @param {string} query The text to search.
 	 */
-	const onFilterValueChange = async ( query ) => {
+	const onFilterValueChange = useDebounce( async ( query ) => {
 		let response = 0;
 
 		// Don't kick off search without having at least two characters.
 		if ( query.length < threshold ) {
+			setDropdownOptions( [] );
 			return;
 		}
 
@@ -154,7 +156,7 @@ const CoAuthors = () => {
 			response = 0;
 			console.log( error ); // eslint-disable-line no-console
 		}
-	};
+	}, 500 );
 
 	/**
 	 * Run when authors updates.