Only focus the form token field if it is not on initial render.

WordPress · Sep 22, 2022 · 819fe4d · 819fe4d
1 parent 7706fa2
commit 819fe4d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
@@ -252,6 +252,7 @@ function ComboboxControl( {
 										? `${ currentLabel }, ${ label }`
 										: null
 								}
+								inputHasFocus={ inputHasFocus }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
 								isExpanded={ isExpanded }

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 } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,6 +22,7 @@ export function UnForwardedTokenInput(
 	const {
 		value,
 		isExpanded,
+		inputHasFocus = false,
 		instanceId,
 		selectedSuggestionIndex,
 		className,
@@ -31,6 +32,17 @@ export function UnForwardedTokenInput(
 
 	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( {
@@ -62,7 +74,7 @@ export function UnForwardedTokenInput(
 					: undefined
 			}
 			aria-activedescendant={
-				selectedSuggestionIndex !== -1
+				! isInitialRender && 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,6 +199,7 @@ export interface TokenProps extends TokenItem {
 
 export interface TokenInputProps {
 	isExpanded: boolean;
+	inputHasFocus?: boolean;
 	instanceId: string | number;
 	selectedSuggestionIndex: number;
 	onChange?: ( { value }: { value: string } ) => void;