FormTokenField: add ability to auto select first matching suggestion for incomplete token

packages/components/src/form-token-field/index.tsx

@@ -76,6 +76,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
 		__next36pxDefaultSize = false,
+		__experimentalAutoSelectFirstMatch = false,
 	} = props;
 
 	const instanceId = useInstanceId( FormTokenField );
@@ -495,8 +496,18 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	}
 
 	function getSelectedSuggestion() {
+		const matchingSuggestions = getMatchingSuggestions();
+
 		if ( selectedSuggestionIndex !== -1 ) {
-			return getMatchingSuggestions()[ selectedSuggestionIndex ];
+			return matchingSuggestions[ selectedSuggestionIndex ];
+		}
+
+		if (
+			matchingSuggestions.length > 0 &&
+			incompleteTokenValue.length > 0 &&
+			__experimentalAutoSelectFirstMatch
+		) {
+			return matchingSuggestions[ 0 ];
 		}
 
 		return undefined;

packages/components/src/form-token-field/stories/index.tsx

@@ -101,3 +101,13 @@ Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
+
+export const DropdownSelector: ComponentStory< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+DropdownSelector.args = {
+	...Default.args,
+	__experimentalExpandOnFocus: true,
+	__experimentalAutoSelectFirstMatch: true,
+	__experimentalValidateInput: ( token: string ) =>
+		continents.includes( token ),
+};

packages/components/src/form-token-field/types.ts

@@ -154,6 +154,15 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * If true, the select the first matching suggestion when the user presses
+	 * the Enter key (or space when tokenizeOnSpace is true).
+	 *
+	 * This has no effect if __experimentalValidateInput isn't defined.
+	 *
+	 * @default false
+	 */
+	__experimentalAutoSelectFirstMatch?: boolean;
 }
 
 export interface SuggestionsListProps< T = string | { value: string } > {