fix: handle composition events for better international keyboard support

Add handling for composition events, allowing users to compose inputs normally before committing a
value to be masked. Replaces fix from v1.3.8 with more robust handling of the composition events.

Author: scott-vanbrug

src/core.js

@@ -54,17 +54,23 @@ export function getInputElement(el) {
  * @param {Event} event The event object
  */
 export function inputHandler(event) {
-  const { target, detail } = event
+  const { target, detail, inputType } = event
 
   // We dont need to run this method on the event we emit (prevent event loop)
-  if ((detail && detail.facade) || event.inputType === 'insertCompositionText') {
+  if (detail && detail.facade) {
     return false
   }
 
   // since we will be emitting our own custom input event
   // we can stop propagation of this native event
   event.stopPropagation()
 
+  // Ignore input events related to composition, specific composition
+  // events will handle updating the input after text is composed
+  if (['insertCompositionText', 'insertFromComposition'].includes(inputType)) {
+    return false
+  }
+
   const originalValue = target.value
   const originalPosition = target.selectionEnd
   const { oldValue } = target[CONFIG_KEY]
@@ -138,9 +144,14 @@ export function updateCursor(event, originalValue, originalPosition) {
  * @param {Event} [event] The event that triggered this this update, null if not triggered by an input event
  */
 export function updateValue(el, vnode, { emit = true, force = false } = {}, event) {
-  let { config, oldValue } = el[CONFIG_KEY]
+  let { config, oldValue, isComposing } = el[CONFIG_KEY]
   let currentValue = vnode && vnode.data.model ? vnode.data.model.value : el.value
 
+  // manipulating input value while text is being composed can lead to inputs being duplicated
+  if (isComposing) {
+    return
+  }
+
   oldValue = oldValue || ''
   currentValue = currentValue || ''
 

src/directive.js

@@ -26,9 +26,30 @@ export default {
       core.inputHandler(e, el)
     }
 
+    const compositionHandler = (e) => {
+      if (e.target !== el) {
+        return
+      }
+
+      if (['compositionstart', 'compositionupdate'].includes(e.type)) {
+        el[CONFIG_KEY].isComposing = true
+      } else if (e.type === 'compositionend') {
+        el[CONFIG_KEY].isComposing = false
+        core.inputHandler(e, el)
+      }
+    }
+
     handlerOwner.addEventListener('input', handler, true)
+    handlerOwner.addEventListener('compositionstart', compositionHandler, true)
+    handlerOwner.addEventListener('compositionupdate', compositionHandler, true)
+    handlerOwner.addEventListener('compositionend', compositionHandler, true)
 
-    config.cleanup = () => handlerOwner.removeEventListener('input', handler, true)
+    config.cleanup = () => {
+      handlerOwner.removeEventListener('input', handler, true)
+      handlerOwner.removeEventListener('compositionstart', compositionHandler, true)
+      handlerOwner.removeEventListener('compositionend', compositionHandler, true)
+      handlerOwner.removeEventListener('compositionupdate', compositionHandler, true)
+    }
   },
 
   update: (el, { value, oldValue, modifiers }, vnode) => {

tests/directive.test.js

@@ -92,6 +92,71 @@ describe('Directive', () => {
     expect(wrapper.element.unmaskedValue).toBe('1122')
   })
 
+  describe('Composition events', () => {
+    test('Should not update value when composing the input', () => {
+      buildWrapper({ value: 1234 })
+      expect(wrapper.element.value).toBe('12.34')
+
+      wrapper.element.value = '1122'
+      wrapper.find('input').trigger('compositionstart')
+      wrapper.find('input').trigger('input', { inputType: 'insertCompositionText' })
+
+      expect(wrapper.element.value).toBe('1122')
+      expect(wrapper.element.unmaskedValue).toBe('1234')
+    })
+
+    test('Should not update value when updating the composed input', () => {
+      buildWrapper({ value: 1234 })
+      expect(wrapper.element.value).toBe('12.34')
+
+      wrapper.element.value = '1122'
+      wrapper.find('input').trigger('compositionupdate')
+      wrapper.find('input').trigger('input', { inputType: 'insertCompositionText' })
+
+      expect(wrapper.element.value).toBe('1122')
+      expect(wrapper.element.unmaskedValue).toBe('1234')
+    })
+
+    test('Should update value when composition ends', () => {
+      buildWrapper({ value: 1234 })
+      expect(wrapper.element.value).toBe('12.34')
+
+      wrapper.element.value = '1122'
+      wrapper.find('input').trigger('compositionstart')
+      wrapper.find('input').trigger('input', { inputType: 'insertCompositionText' })
+
+      expect(wrapper.element.value).toBe('1122')
+      expect(wrapper.element.unmaskedValue).toBe('1234')
+
+      wrapper.find('input').trigger('compositionend')
+
+      expect(wrapper.element.value).toBe('11.22')
+      expect(wrapper.element.unmaskedValue).toBe('1122')
+    })
+
+    test('Should prevent all value updates while composing text', () => {
+      buildWrapper({ value: 1234 })
+      expect(wrapper.element.value).toBe('12.34')
+
+      wrapper.element.value = '1122'
+      wrapper.find('input').trigger('compositionstart')
+      wrapper.find('input').trigger('input', { inputType: 'insertCompositionText' })
+      wrapper.setValue('4321')
+
+      expect(wrapper.element.value).toBe('4321')
+      expect(wrapper.element.unmaskedValue).toBe('1234')
+    })
+
+    test('Should prevent composition input events from propagating', () => {
+      buildWrapper()
+
+      wrapper.find('input').trigger('input', { inputType: 'insertCompositionText' })
+      wrapper.find('input').trigger('input', { inputType: 'insertFromComposition' })
+
+      expect(inputListener).toHaveBeenCalledTimes(0)
+    })
+  })
+
   test('Should honor short modifier', async () => {
     buildWrapper({
       template: `<input v-facade.short="mask" value="12" @input="inputListener" />`
@@ -241,5 +306,27 @@ describe('Directive', () => {
 
       expect(inputListener).toBeCalledTimes(1)
     })
+
+    test('should not prevent updates when other inputs are composing text', async () => {
+      otherInput.setValue('1122')
+
+      otherInput.trigger('compositionstart')
+
+      facadeInput.element.value = '1234'
+      facadeInput.trigger('input')
+
+      expect(otherInput.element.value).toBe('1122')
+      expect(facadeInput.element.value).toBe('12.34')
+      expect(inputListener).toBeCalledTimes(1)
+    })
+
+    test('should handle composition events on the main element', async () => {
+      facadeInput.setValue('1122')
+      facadeInput.element.value = '1234'
+      facadeInput.trigger('compositionstart')
+      facadeInput.trigger('input', { inputType: 'insertCompositionText' })
+
+      expect(facadeInput.element.unmaskedValue).toBe('1122')
+    })
   })
 })