Revert "Components: FormTokenField - add prop to allow saving of toke…

…ns onBlur (#53976)" This reverts commit 416f462.
WordPress · Sep 13, 2023 · a24d0e7 · a24d0e7
1 parent 416f462
commit a24d0e7
Show file tree

Hide file tree

Showing 6 changed files with 2 additions and 53 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,10 +2,6 @@
 
 ## Unreleased
 
-### Enhancement
-
--   `FormTokenField`: Add `tokenizeOnBlur` prop to add any incompleteTokenValue as a new token when field loses focus ([#53976](https://github.com/WordPress/gutenberg/pull/53976)).
-
 ### Bug Fix
 
 -   `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)).

diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
@@ -62,7 +62,6 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
 -   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.5. (The prop can be safely removed once this happens.)
--   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
 ## Usage
 

diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
@@ -73,7 +73,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
-		tokenizeOnBlur = false,
 	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
 		props,
 		'wp.components.FormTokenField'
@@ -168,9 +167,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			__experimentalValidateInput( incompleteTokenValue )
 		) {
 			setIsActive( false );
-			if ( tokenizeOnBlur && inputHasValidValue() ) {
-				addNewToken( incompleteTokenValue );
-			}
 		} else {
 			// Reset to initial state
 			setIncompleteTokenValue( '' );
@@ -455,7 +451,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		setSelectedSuggestionScroll( false );
 		setIsExpanded( ! __experimentalExpandOnFocus );
 
-		if ( isActive && ! tokenizeOnBlur ) {
+		if ( isActive ) {
 			focus();
 		}
 	}

diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
@@ -205,42 +205,7 @@ describe( 'FormTokenField', () => {
 			] );
 		} );
 
-		it( 'should add a token with the input value with onBlur when `tokenizeOnBlur` prop is `true`', async () => {
-			const user = userEvent.setup();
-
-			const onChangeSpy = jest.fn();
-
-			const { rerender } = render(
-				<FormTokenFieldWithState onChange={ onChangeSpy } />
-			);
-
-			const input = screen.getByRole( 'combobox' );
-
-			// Add 'grapefruit' token by typing it and check blur of field does not tokenize it.
-			await user.type( input, 'grapefruit' );
-			await user.click( document.body );
-			expect( onChangeSpy ).toHaveBeenCalledTimes( 0 );
-			expectTokensNotToBeInTheDocument( [ 'grapefruit' ] );
-
-			rerender(
-				<FormTokenFieldWithState
-					onChange={ onChangeSpy }
-					tokenizeOnBlur
-				/>
-			);
-			await user.clear( input );
-
-			// Add 'grapefruit' token by typing it and check blur of field tokenizes it.
-			await user.type( input, 'grapefruit' );
-
-			await user.click( document.body );
-			expect( onChangeSpy ).toHaveBeenNthCalledWith( 1, [
-				'grapefruit',
-			] );
-			expectTokensToBeInTheDocument( [ 'grapefruit' ] );
-		} );
-
-		it( "should not add a token with the input's value when tokenizeOnBlur is not set and pressing the tab key", async () => {
+		it( "should not add a token with the input's value when pressing the tab key", async () => {
 			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();

diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
@@ -182,12 +182,6 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
-	/**
-	 * If true, add any incompleteTokenValue as a new token when the field loses focus.
-	 *
-	 * @default false
-	 */
-	tokenizeOnBlur?: boolean;
 }
 
 /**

diff --git a/packages/patterns/src/components/category-selector.js b/packages/patterns/src/components/category-selector.js
@@ -111,7 +111,6 @@ export default function CategorySelector( { onCategorySelection } ) {
 				onInputChange={ debouncedSearch }
 				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
 				label={ __( 'Categories' ) }
-				tokenizeOnBlur={ true }
 			/>
 		</>
 	);