From 9435de38b7ef361bdf4870fed7b0e5c191321af5 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 23 Aug 2022 15:16:26 +0200
Subject: [PATCH] Add example with special characters

---
 .../src/form-token-field/test/index.tsx       | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
index 42775c8bf003a2..2dc08d02fa4f88 100644
--- a/packages/components/src/form-token-field/test/index.tsx
+++ b/packages/components/src/form-token-field/test/index.tsx
@@ -628,6 +628,41 @@ describe( 'FormTokenField', () => {
 				screen.queryByPlaceholderText( 'Test placeholder' )
 			).not.toBeInTheDocument();
 		} );
+
+		it( 'should handle accents and special characters in tokens and input value', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const onChangeSpy = jest.fn();
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					initialValue={ [ 'français', 'español', '日本', 'עברית' ] }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Add 'عربى' token by typing it and pressing enter to tokenize it.
+			await user.type( input, 'عربى[Enter]' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenCalledWith( [
+				'français',
+				'español',
+				'日本',
+				'עברית',
+				'عربى',
+			] );
+			expectTokensToBeInTheDocument( [
+				'français',
+				'español',
+				'日本',
+				'עברית',
+				'عربى',
+			] );
+		} );
 	} );
 
 	describe( 'suggestions', () => {