FormTokenField: Fix duplicate input in IME composition (#45607)

* FormTokenField: Fix duplicate input in IME composition * Update readme * Fix wrong event.key case value * Add composition session check Co-authored-by: Lena Morita <lena@jaguchi.com> * Add workaround for Mac Safari Co-authored-by: Lena Morita <lena@jaguchi.com> Co-authored-by: Lena Morita <lena@jaguchi.com>
WordPress · Nov 12, 2022 · c72ef28 · c72ef28
1 parent 7822ef8
commit c72ef28
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Bug Fix
 
+-   `FormTokenField`: Fix duplicate input in IME composition ([#45607](https://github.com/WordPress/gutenberg/pull/45607)).
 -   `Autocomplete`: Fix unexpected block insertion during IME composition ([#45510](https://github.com/WordPress/gutenberg/pull/45510)).
 -   `Icon`: Making size prop work for icon components using dash icon strings ([#45593](https://github.com/WordPress/gutenberg/pull/45593))
 -   `ToolsPanelItem`: Prevent unintended calls to onDeselect when parent panel is remounted and item is rendered via SlotFill ([#45673](https://github.com/WordPress/gutenberg/pull/45673))

diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
@@ -169,10 +169,18 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function onKeyDown( event: KeyboardEvent ) {
 		let preventDefault = false;
 
-		if ( event.defaultPrevented ) {
+		if (
+			event.defaultPrevented ||
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
 			return;
 		}
-		switch ( event.code ) {
+		switch ( event.key ) {
 			case 'Backspace':
 				preventDefault = handleDeleteKey( deleteTokenBeforeInput );
 				break;
@@ -213,9 +221,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 	function onKeyPress( event: KeyboardEvent ) {
 		let preventDefault = false;
-		// TODO: replace to event.code;
-		switch ( event.charCode ) {
-			case 44: // Comma.
+
+		switch ( event.key ) {
+			case ',':
 				preventDefault = handleCommaKey();
 				break;
 			default: