Try a more HTML-based conditional approach.

WordPress · Sep 22, 2022 · 0b26b8c · 0b26b8c
1 parent 6177023
commit 0b26b8c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 25 deletions.
diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
@@ -69,7 +69,7 @@ function ComboboxControl( {
 	} );
 
 	const currentOption = options.find( ( option ) => option.value === value );
-	const currentLabel = currentOption?.label ?? '';
+	const currentLabel = currentOption?.label;
 	// Use a custom prefix when generating the `instanceId` to avoid having
 	// duplicate input IDs when rendering this component and `FormTokenField`
 	// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
@@ -81,6 +81,7 @@ function ComboboxControl( {
 	const [ inputHasFocus, setInputHasFocus ] = useState( false );
 	const [ inputValue, setInputValue ] = useState( '' );
 	const inputContainer = useRef();
+	const changingLabel = selectedSuggestion?.label || inputValue;
 
 	const matchingSuggestions = useMemo( () => {
 		const startsWithMatch = [];
@@ -235,8 +236,8 @@ function ComboboxControl( {
 			>
 				<div
 					className="components-combobox-control__suggestions-container"
-					tabIndex="-1"
 					onKeyDown={ onKeyDown }
+					tabIndex="-1"
 				>
 					<InputWrapperFlex
 						__next36pxDefaultSize={ __next36pxDefaultSize }
@@ -246,20 +247,17 @@ function ComboboxControl( {
 								className="components-combobox-control__input"
 								instanceId={ instanceId }
 								ref={ inputContainer }
-								value={ isExpanded ? inputValue : currentLabel }
-								aria-label={
-									currentLabel
-										? `${ currentLabel }, ${ label }`
-										: null
+								value={
+									isExpanded ? changingLabel : currentLabel
 								}
-								inputHasFocus={ inputHasFocus }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
 								isExpanded={ isExpanded }
 								selectedSuggestionIndex={ matchingSuggestions.indexOf(
 									selectedSuggestion
 								) }
 								onChange={ onInputChange }
+								isComboboxControl={ true }
 							/>
 						</FlexBlock>
 						{ allowReset && (

diff --git a/packages/components/src/form-token-field/token-input.tsx b/packages/components/src/form-token-field/token-input.tsx
@@ -7,7 +7,7 @@ import type { ChangeEvent, ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useEffect, useState } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,27 +22,16 @@ export function UnForwardedTokenInput(
 	const {
 		value,
 		isExpanded,
-		inputHasFocus = false,
 		instanceId,
 		selectedSuggestionIndex,
 		className,
 		onChange,
+		isComboboxControl,
 		...restProps
 	} = props;
 
 	const size = value ? value.length + 1 : 0;
 
-	// Is this our first render? Take the value and find out if it should be. If no value, A11Y concerns will not exist so false is okay.
-	const [ isInitialRender, setIsInitialRender ] = useState(
-		value ? true : false
-	);
-	useEffect( () => {
-		// If initial render is set to true but the user just placed focus on the input, now focus can be allowed.
-		if ( isInitialRender && inputHasFocus ) {
-			setIsInitialRender( false );
-		}
-	}, [ inputHasFocus ] );
-
 	const onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {
 		if ( onChange ) {
 			onChange( {
@@ -69,12 +58,12 @@ export function UnForwardedTokenInput(
 			aria-expanded={ isExpanded }
 			aria-autocomplete="list"
 			aria-owns={
-				isExpanded
+				! isComboboxControl && isExpanded
 					? `components-form-token-suggestions-${ instanceId }`
 					: undefined
 			}
 			aria-activedescendant={
-				! isInitialRender && selectedSuggestionIndex !== -1
+				! isComboboxControl && selectedSuggestionIndex !== -1
 					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
 					: undefined
 			}

diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
@@ -199,9 +199,9 @@ export interface TokenProps extends TokenItem {
 
 export interface TokenInputProps {
 	isExpanded: boolean;
-	inputHasFocus?: boolean;
 	instanceId: string | number;
 	selectedSuggestionIndex: number;
 	onChange?: ( { value }: { value: string } ) => void;
 	value: string;
+	isComboboxControl?: boolean;
 }
diff --git a/packages/editor/src/components/post-author/index.js b/packages/editor/src/components/post-author/index.js
@@ -11,7 +11,7 @@ import PostAuthorCombobox from './combobox';
 import PostAuthorSelect from './select';
 import { AUTHORS_QUERY } from './constants';
 
-const minimumUsersForCombobox = 25;
+const minimumUsersForCombobox = 1;
 
 function PostAuthor() {
 	const showCombobox = useSelect( ( select ) => {