[core] fix(TagInput): don't add a tag when Enter` is pressed while …

…composing in an IME (#6767) Co-authored-by: Eric Jeney <[email protected]>
palantir · Apr 19, 2024 · d2ef695 · d2ef695 · svc-palantir-github · Apr 19, 2024
1 parent f2c86bc
commit d2ef695
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/core/src/components/tag-input/tagInput.tsx b/packages/core/src/components/tag-input/tagInput.tsx
@@ -421,7 +421,8 @@ export class TagInput extends AbstractPureComponent<TagInputProps, TagInputState
 
         let activeIndexToEmit = activeIndex;
 
-        if (event.key === "Enter" && value.length > 0) {
+        // do not add a new tag if the user is composing (e.g. for Japanese or Chinese)
+        if (event.key === "Enter" && !event.nativeEvent.isComposing && value.length > 0) {
             this.addTags(value, "default");
         } else if (selectionEnd === 0 && this.props.values.length > 0) {
             // cursor at beginning of input allows interaction with tags.

diff --git a/packages/core/test/tag-input/tagInputTests.tsx b/packages/core/test/tag-input/tagInputTests.tsx
@@ -116,6 +116,13 @@ describe("<TagInput>", () => {
             assert.isTrue(onAdd.notCalled);
         });
 
+        it("is not invoked on enter when input is composing", () => {
+            const onAdd = sinon.stub();
+            const wrapper = mountTagInput(onAdd);
+            pressEnterInInputWhenComposing(wrapper, "构成");
+            assert.isTrue(onAdd.notCalled);
+        });
+
         it("is invoked on enter", () => {
             const onAdd = sinon.stub();
             const wrapper = mountTagInput(onAdd);
@@ -455,7 +462,7 @@ describe("<TagInput>", () => {
         it("pressing backspace does not remove item", () => {
             const onRemove = sinon.spy();
             const wrapper = mount(<TagInput onRemove={onRemove} values={VALUES} />);
-            wrapper.find("input").simulate("keydown", createInputKeydownEventMetadata("text", "Backspace"));
+            wrapper.find("input").simulate("keydown", createInputKeydownEventMetadata("text", "Backspace", false));
             assert.isTrue(onRemove.notCalled);
         });
     });
@@ -576,13 +583,20 @@ describe("<TagInput>", () => {
     });
 
     function pressEnterInInput(wrapper: ReactWrapper<any, any>, value: string) {
-        wrapper.find("input").prop("onKeyDown")?.(createInputKeydownEventMetadata(value, "Enter") as any);
+        wrapper.find("input").prop("onKeyDown")?.(createInputKeydownEventMetadata(value, "Enter", false) as any);
+    }
+
+    function pressEnterInInputWhenComposing(wrapper: ReactWrapper<any, any>, value: string) {
+        wrapper.find("input").prop("onKeyDown")?.(createInputKeydownEventMetadata(value, "Enter", true) as any);
     }
 
-    function createInputKeydownEventMetadata(value: string, key: string) {
+    function createInputKeydownEventMetadata(value: string, key: string, isComposing: boolean) {
         return {
             currentTarget: { value },
             key,
+            nativeEvent: {
+                isComposing,
+            },
             // Enzyme throws errors if we don't mock the stopPropagation method.
             stopPropagation: () => {
                 return;