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 ) => {