diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md index b442e42c313ff..3a4ce2a143624 100644 --- a/packages/components/src/form-token-field/README.md +++ b/packages/components/src/form-token-field/README.md @@ -62,7 +62,7 @@ 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 adds any incompleteTokenValue as a new token when field loses focus. +- `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/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx index 81e61ea1864de..9780f0c057155 100644 --- a/packages/components/src/form-token-field/test/index.tsx +++ b/packages/components/src/form-token-field/test/index.tsx @@ -9,7 +9,6 @@ import { within, getDefaultNormalizer, waitFor, - act, } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import type { ComponentProps } from 'react'; @@ -219,9 +218,7 @@ describe( 'FormTokenField', () => { // Add 'grapefruit' token by typing it and check blur of field does not tokenize it. await user.type( input, 'grapefruit' ); - act( () => { - input.blur(); - } ); + await user.click( document.body ); expect( onChangeSpy ).toHaveBeenCalledTimes( 0 ); expectTokensNotToBeInTheDocument( [ 'grapefruit' ] ); @@ -236,9 +233,7 @@ describe( 'FormTokenField', () => { // Add 'grapefruit' token by typing it and check blur of field tokenizes it. await user.type( input, 'grapefruit' ); - act( () => { - input.blur(); - } ); + await user.click( document.body ); expect( onChangeSpy ).toHaveBeenNthCalledWith( 1, [ 'grapefruit', ] ); diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts index be34eadd1cffd..e343601106f41 100644 --- a/packages/components/src/form-token-field/types.ts +++ b/packages/components/src/form-token-field/types.ts @@ -183,7 +183,7 @@ export interface FormTokenFieldProps */ __nextHasNoMarginBottom?: boolean; /** - * If true add any incompleteTokenValue as a new token. + * If true, add any incompleteTokenValue as a new token when the field loses focus. * * @default false */