From 32526c06cf12820a834f80024eed61b8a61bb734 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 8 Nov 2022 23:46:55 +0900 Subject: [PATCH 1/5] FormTokenField: Fix duplicate input in IME composition --- packages/components/src/form-token-field/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index cca98fd5e6d827..51ef90352f790a 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -172,7 +172,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { if ( event.defaultPrevented ) { return; } - switch ( event.code ) { + switch ( event.key ) { case 'Backspace': preventDefault = handleDeleteKey( deleteTokenBeforeInput ); break; @@ -213,9 +213,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 'Comma': preventDefault = handleCommaKey(); break; default: From 918cf39fde7a1d57cb2f138042fd88a78e9e6283 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 8 Nov 2022 23:49:02 +0900 Subject: [PATCH 2/5] Update readme --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4f62b51db7ce74..d4ca4c25a1c7d3 100644 --- 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)). ### Internal From 16190d6e679f05bf709678a383f8d0c5df391389 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 9 Nov 2022 19:46:05 +0900 Subject: [PATCH 3/5] Fix wrong event.key case value --- packages/components/src/form-token-field/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 51ef90352f790a..e0e2b89dae6ef7 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -215,7 +215,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { let preventDefault = false; switch ( event.key ) { - case 'Comma': + case ',': preventDefault = handleCommaKey(); break; default: From df7550cbbededddd755d65d79c5d2a5c463ba69c Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 9 Nov 2022 19:53:47 +0900 Subject: [PATCH 4/5] Add composition session check Co-authored-by: Lena Morita --- packages/components/src/form-token-field/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index e0e2b89dae6ef7..c986c716f4772d 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -169,7 +169,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { function onKeyDown( event: KeyboardEvent ) { let preventDefault = false; - if ( event.defaultPrevented ) { + if ( event.defaultPrevented || event.nativeEvent.isComposing ) { return; } switch ( event.key ) { From 30485198357a519569c64394267f69303aa98bc1 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 10 Nov 2022 21:18:52 +0900 Subject: [PATCH 5/5] Add workaround for Mac Safari Co-authored-by: Lena Morita --- packages/components/src/form-token-field/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index c986c716f4772d..a7c8e9d272f8e3 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -169,7 +169,15 @@ export function FormTokenField( props: FormTokenFieldProps ) { function onKeyDown( event: KeyboardEvent ) { let preventDefault = false; - if ( event.defaultPrevented || event.nativeEvent.isComposing ) { + 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.key ) {