feat: Expose isComposing property on keyboard events (#3057)

cloudscape-design · Nov 26, 2024 · 49a178d · 49a178d
1 parent 6605b1c
commit 49a178d
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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<BaseKeyDetail>
       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
@@ -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<BaseKeyDetail> =>
   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
@@ -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 });