Post author dropdown: add accessible-autocomplete

editor/components/post-author/accessible-autocomplete.css

@@ -0,0 +1,141 @@
+.autocomplete__wrapper {
+  position: relative;
+}
+
+.autocomplete__hint,
+.autocomplete__input {
+  -webkit-appearance: none;
+  border: 2px solid;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #BFC1C3;
+  position: absolute;
+}
+
+.autocomplete__input--default{
+  padding: 4px;
+}
+
+.autocomplete__input--focused {
+  outline-offset: 0;
+  outline: 3px solid #ffbf47;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 4px 34px 4px 4px;
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down{
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0B0C0C;
+  border-top: 0;
+  color: #34384B;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #BFC1C3;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option > * {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #FAFAFA;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #005EA5;
+  border-color: #005EA5;
+  color: white;
+  outline: none;
+}
+
+.autocomplete__option--no-results {
+  background-color: #FAFAFA;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 4px;
+}
+
+@media (min-width: 641px) {
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 19px;
+    line-height: 1.31579;
+  }
+}

editor/components/post-author/index.js

@@ -5,39 +5,86 @@ import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/components';
 import { Component, compose } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
  */
 import PostAuthorCheck from './check';
 
+/**
+ * External dependencies
+ */
+import accessibleAutocomplete from 'accessible-autocomplete';
+import './accessible-autocomplete.css';
+import { findWhere, debounce } from 'underscore';
+
 export class PostAuthor extends Component {
 	constructor() {
 		super( ...arguments );
 
 		this.setAuthorId = this.setAuthorId.bind( this );
+		this.suggestAuthor = this.suggestAuthor.bind( this );
+	}
+
+	componentDidMount() {
+		const { instanceId, authors } = this.props;
+		this.authors = authors;
+		if ( authors.length > 50 ) {
+			accessibleAutocomplete.enhanceSelectElement( {
+				selectElement: document.querySelector( '#post-author-selector-' + instanceId ),
+				minLength: 2,
+				showAllValues: true,
+				autoselect: true,
+				displayMenu: 'overlay',
+				onConfirm: this.setAuthorId,
+				source: debounce( this.suggestAuthor, 300 ),
+				tNoResults: () => __( 'No results found' ),
+				tStatusQueryTooShort: ( minQueryLength ) => __( `Type in ${ minQueryLength } or more characters for results` ),
+				tStatusNoResults: () => __( 'No search results' ),
+				tStatusSelectedOption: ( selectedOption, length ) => __( `${ selectedOption } (1 of ${ length }) is selected` ),
+				tStatusResults: ( length, contentSelectedOption ) => {
+					const words = {
+						result: ( length === 1 ) ? __( 'result' ) : __( 'results' ),
+						is: ( length === 1 ) ? __( 'is' ) : __( 'are' ),
+					};
+					return <span>{ length } { words.result } { words.is } available. { contentSelectedOption }</span>;
+				},
+			} );
+		}
+	}
+
+	suggestAuthor( query, populateResults ) {
+		if ( query.length < 2 ) {
+			return;
+		}
+		const payload = '?search=' + encodeURIComponent( query );
+		apiRequest( { path: '/wp/v2/users' + payload } ).done( ( results ) => {
+			this.authors = results;
+			populateResults( results.map( ( author ) => ( author.name ) ) );
+		} );
 	}
 
-	setAuthorId( event ) {
+	setAuthorId( selectedName ) {
+		if ( ! selectedName ) {
+			return;
+		}
 		const { onUpdateAuthor } = this.props;
-		const { value } = event.target;
-		onUpdateAuthor( Number( value ) );
+		const author = findWhere( this.authors, { name: selectedName } );
+		onUpdateAuthor( Number( author.id ) );
 	}
 
 	render() {
 		const { postAuthor, instanceId, authors } = this.props;
 		const selectId = 'post-author-selector-' + instanceId;
 
-		// Disable reason: A select with an onchange throws a warning
-
 		/* eslint-disable jsx-a11y/no-onchange */
 		return (
 			<PostAuthorCheck>
 				<label htmlFor={ selectId }>{ __( 'Author' ) }</label>
 				<select
 					id={ selectId }
 					value={ postAuthor }
-					onChange={ this.setAuthorId }
 					className="editor-post-author__select"
 				>
 					{ authors.map( ( author ) => (

package.json

@@ -67,6 +67,7 @@
 		"@wordpress/custom-templated-path-webpack-plugin": "1.0.2",
 		"@wordpress/jest-preset-default": "1.0.6",
 		"@wordpress/scripts": "1.2.0",
+		"accessible-autocomplete": "1.6.1",
 		"autoprefixer": "8.2.0",
 		"babel-core": "6.26.0",
 		"babel-eslint": "8.0.3",

packages/core-data/src/resolvers.js

@@ -32,7 +32,7 @@ export async function* getCategories() {
  * Requests authors from the REST API.
  */
 export async function* getAuthors() {
-	const users = await apiRequest( { path: '/wp/v2/users/?who=authors&per_page=-1' } );
+	const users = await apiRequest( { path: '/wp/v2/users/?who=authors&per_page=100' } );
 	yield receiveUserQuery( 'authors', users );
 }