diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
index 660f8a4ad588fd..cc4543f180205f 100644
--- 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( {
>
{ allowReset && (
diff --git a/packages/components/src/form-token-field/token-input.tsx b/packages/components/src/form-token-field/token-input.tsx
index 56080baff144a4..066b28e089c23d 100644
--- 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
index b3e401bf5c0435..84c571d767f423 100644
--- 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
index 7e734379f64f64..6884a0366efdfc 100644
--- 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 ) => {