fix(input): DP-180970 ime composition bug (#1146)

Author: braddialpad

packages/dialtone-vue/components/input/input.test.js

@@ -586,6 +586,99 @@ describe('DtInput tests', () => {
     });
   });
 
+  describe('IME Composition Tests', () => {
+    describe('When type is not a textarea', () => {
+      it('should not emit input or update:modelValue while composing', async () => {
+        await nativeInput.trigger('compositionstart');
+        await nativeInput.trigger('input');
+
+        expect(wrapper.emitted().input).toBeUndefined();
+        expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
+      });
+
+      it('should emit input and update:modelValue after composition ends', async () => {
+        await nativeInput.trigger('compositionstart');
+        nativeInput.element.value = 'か';
+        await nativeInput.trigger('input'); // Chrome: input fires before compositionend (blocked)
+        await nativeInput.trigger('compositionend'); // compositionend emits the committed value
+
+        expect(wrapper.emitted().input[0][0]).toBe('か');
+        expect(wrapper.emitted()['update:modelValue'][0][0]).toBe('か');
+      });
+
+      it('should not double-emit when input fires after compositionend (Firefox order)', async () => {
+        await nativeInput.trigger('compositionstart');
+        nativeInput.element.value = 'か';
+        // Firefox fires compositionend then input — dispatch both synchronously
+        // before the microtask that clears justEndedComposition can run
+        nativeInput.element.dispatchEvent(new Event('compositionend', { bubbles: true }));
+        nativeInput.element.dispatchEvent(new Event('input', { bubbles: true }));
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.emitted().input).toHaveLength(1);
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(1);
+        expect(wrapper.emitted().input[0][0]).toBe('か');
+      });
+
+      it('should resume normal emission after composition ends', async () => {
+        await nativeInput.trigger('compositionstart');
+        await nativeInput.trigger('compositionend');
+
+        nativeInput.element.value = 'hello';
+        await nativeInput.trigger('input');
+
+        const inputEmissions = wrapper.emitted().input;
+        expect(inputEmissions[inputEmissions.length - 1][0]).toBe('hello');
+      });
+    });
+
+    describe('When type is a textarea', () => {
+      beforeEach(() => {
+        mockProps = { type: 'textarea' };
+        updateWrapper();
+      });
+
+      it('should not emit input or update:modelValue while composing', async () => {
+        await nativeTextarea.trigger('compositionstart');
+        await nativeTextarea.trigger('input');
+
+        expect(wrapper.emitted().input).toBeUndefined();
+        expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
+      });
+
+      it('should emit input and update:modelValue after composition ends', async () => {
+        await nativeTextarea.trigger('compositionstart');
+        nativeTextarea.element.value = 'か';
+        await nativeTextarea.trigger('input'); // Chrome: input fires before compositionend (blocked)
+        await nativeTextarea.trigger('compositionend'); // compositionend emits the committed value
+
+        expect(wrapper.emitted().input[0][0]).toBe('か');
+        expect(wrapper.emitted()['update:modelValue'][0][0]).toBe('か');
+      });
+
+      it('should not double-emit when input fires after compositionend (Firefox order)', async () => {
+        await nativeTextarea.trigger('compositionstart');
+        nativeTextarea.element.value = 'か';
+        nativeTextarea.element.dispatchEvent(new Event('compositionend', { bubbles: true }));
+        nativeTextarea.element.dispatchEvent(new Event('input', { bubbles: true }));
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.emitted().input).toHaveLength(1);
+        expect(wrapper.emitted()['update:modelValue']).toHaveLength(1);
+        expect(wrapper.emitted().input[0][0]).toBe('か');
+      });
+
+      it('should not override textarea value via modelValue watcher while composing', async () => {
+        nativeTextarea.element.value = 'composing...';
+        await nativeTextarea.trigger('compositionstart');
+
+        await wrapper.setProps({ modelValue: 'external update' });
+
+        expect(nativeTextarea.element.value).toBe('composing...');
+      });
+    });
+  });
+
   describe('Extendability Tests', () => {
     it('should handle pass through props/attrs', async () => {
       expect(nativeInput.attributes()).toMatchObject(baseAttrs);

packages/dialtone-vue/components/input/input.vue

@@ -373,6 +373,8 @@ export default {
       isInvalid: false,
       defaultLength: 0,
       hasSlotContent,
+      isComposing: false,
+      justEndedComposition: false,
     };
   },
 
@@ -408,7 +410,25 @@ export default {
 
     inputListeners () {
       return {
+        compositionstart: () => {
+          this.isComposing = true;
+        },
+
+        compositionend: () => {
+          this.isComposing = false;
+          this.justEndedComposition = true;
+          const val = this.$refs.input.value;
+          this.$emit('input', val);
+          this.$emit('update:modelValue', val);
+          // Clear the flag after the current synchronous event processing so
+          // Firefox's post-compositionend input event is skipped, but the
+          // next real user input (a separate browser task) is not.
+          Promise.resolve().then(() => { this.justEndedComposition = false; });
+        },
+
         input: async event => {
+          if (this.isComposing) return;
+          if (this.justEndedComposition) return;
           let val = event.target.value;
           if (this.type === INPUT_TYPES.FILE) {
             const files = Array.from(event.target.files);
@@ -534,7 +554,8 @@ export default {
         }
 
         // Set textarea value programmatically to avoid attribute binding
-        if (this.isTextarea && this.$refs.input && this.$refs.input.value !== newValue) {
+        // Skip during IME composition to avoid interrupting in-progress input
+        if (this.isTextarea && !this.isComposing && this.$refs.input && this.$refs.input.value !== newValue) {
           this.$refs.input.value = newValue;
         }
       },