diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5670b53ba2f8f..89dfebc110c0e 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)). - `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 index cca98fd5e6d82..a7c8e9d272f8e 100644 --- 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: