diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index 89fa24dbc..7fd6bc1b9 100644 --- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts @@ -604,4 +604,45 @@ describe('vModel', () => { expect(foo.selected).toEqual(true) expect(bar.selected).toEqual(true) }) + + it('should work with composition session', async () => { + const component = defineComponent({ + data() { + return { value: '' } + }, + render() { + return [ + withVModel( + h('input', { + 'onUpdate:modelValue': setValue.bind(this) + }), + this.value + ) + ] + } + }) + render(h(component), root) + + const input = root.querySelector('input')! + const data = root._vnode.component.data + expect(input.value).toEqual('') + + //developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event + //compositionstart event could be fired after a user starts entering a Chinese character using a Pinyin IME + input.value = '使用拼音' + triggerEvent('compositionstart', input) + await nextTick() + expect(data.value).toEqual('') + + // input event has no effect during composition session + input.value = '使用拼音输入' + triggerEvent('input', input) + await nextTick() + expect(data.value).toEqual('') + + // After compositionend event being fired, an input event will be automatically trigger + triggerEvent('compositionend', input) + await nextTick() + expect(data.value).toEqual('使用拼音输入') + }) })