diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index e430ebeea2..9fab7d22eb 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -1582,6 +1582,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, @@ -1626,6 +1631,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, @@ -8998,6 +9008,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, @@ -9042,6 +9057,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, @@ -12211,6 +12231,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, @@ -12255,6 +12280,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, @@ -16854,6 +16884,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, @@ -16898,6 +16933,11 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).", "optional": false, "type": "boolean", }, + { + "name": "isComposing", + "optional": false, + "type": "boolean", + }, { "name": "key", "optional": false, diff --git a/src/input/__tests__/input.test.tsx b/src/input/__tests__/input.test.tsx index f04575c92a..239538ffed 100644 --- a/src/input/__tests__/input.test.tsx +++ b/src/input/__tests__/input.test.tsx @@ -445,6 +445,7 @@ describe('Input', () => { ctrlKey: false, altKey: false, metaKey: false, + isComposing: false, }); }); const { input } = renderInput({ onKeyDown: keyDownSpy }); @@ -454,6 +455,25 @@ describe('Input', () => { expect(keyDownSpy).toHaveBeenCalledTimes(1); }); + test('onKeyDown provides correct composition state', () => { + const keyDownSpy = jest.fn(function (event) { + expect(event.detail).toEqual({ + keyCode: 13, + key: 'Enter', + shiftKey: false, + ctrlKey: false, + altKey: false, + metaKey: false, + isComposing: true, + }); + }); + const { input } = renderInput({ onKeyDown: keyDownSpy }); + expect(keyDownSpy).not.toHaveBeenCalled(); + + fireEvent.keyDown(input, { keyCode: 13, key: 'Enter', isComposing: true }); + expect(keyDownSpy).toHaveBeenCalledTimes(1); + }); + test('onKeyUp is called with correct details', () => { const keyUpSpy = jest.fn(function (event: any) { expect(event.detail).toEqual({ @@ -463,6 +483,7 @@ describe('Input', () => { ctrlKey: false, altKey: false, metaKey: false, + isComposing: false, }); }); const { input } = renderInput({ onKeyUp: keyUpSpy }); diff --git a/src/internal/events/index.ts b/src/internal/events/index.ts index dfe10a4741..2e6eacd85b 100644 --- a/src/internal/events/index.ts +++ b/src/internal/events/index.ts @@ -34,6 +34,7 @@ export interface BaseKeyDetail { shiftKey: boolean; altKey: boolean; metaKey: boolean; + isComposing: boolean; } export interface ClickDetail { @@ -91,6 +92,7 @@ export function fireKeyboardEvent(handler: CancelableEventHandler shiftKey: reactEvent.shiftKey, altKey: reactEvent.altKey, metaKey: reactEvent.metaKey, + isComposing: reactEvent.nativeEvent.isComposing, }, reactEvent ); diff --git a/src/select/__tests__/use-select.test.ts b/src/select/__tests__/use-select.test.ts index 0e84a358bf..276a59e543 100644 --- a/src/select/__tests__/use-select.test.ts +++ b/src/select/__tests__/use-select.test.ts @@ -5,11 +5,11 @@ import { createRef } from 'react'; import { act, renderHook } from '../../__tests__/render-hook'; import { flattenOptions } from '../../internal/components/option/utils/flatten-options'; import { getOptionId } from '../../internal/components/options-list/utils/use-ids'; -import { createCustomEvent } from '../../internal/events'; +import { BaseKeyDetail, createCustomEvent } from '../../internal/events'; import { KeyCode } from '../../internal/keycode'; import { useSelect } from '../utils/use-select'; -const createTestEvent = (keyCode: KeyCode) => +const createTestEvent = (keyCode: KeyCode): CustomEvent => createCustomEvent({ cancelable: true, detail: { @@ -19,6 +19,7 @@ const createTestEvent = (keyCode: KeyCode) => shiftKey: false, altKey: false, metaKey: false, + isComposing: false, }, }); diff --git a/src/textarea/__tests__/textarea.test.tsx b/src/textarea/__tests__/textarea.test.tsx index 9557bbe1c0..52f1d04ec7 100644 --- a/src/textarea/__tests__/textarea.test.tsx +++ b/src/textarea/__tests__/textarea.test.tsx @@ -378,6 +378,7 @@ describe('Textarea', () => { ctrlKey: false, altKey: false, metaKey: false, + isComposing: false, }); }); const { textarea } = renderTextarea({ onKeyDown: keyDownSpy }); @@ -396,6 +397,7 @@ describe('Textarea', () => { ctrlKey: false, altKey: false, metaKey: false, + isComposing: false, }); }); const { textarea } = renderTextarea({ onKeyUp: keyUpSpy });