fix(cursor): fixes cursor jumping out of place when deleting from a dynamic mask

Author: RonaldJerez

src/core.js

@@ -95,22 +95,22 @@ export function updateCursor(event, originalValue, originalPosition) {
   }
 
   // get some information about the cursor based on the original value
-  const pasting = event.inputType === 'insertFromPaste'
-  const isCursorAtEnd = (event.data || pasting) && originalPosition == originalValue.length
-  let insertedChar = originalValue[originalPosition - 1]
+  const isInsertEvent = ['insertText', 'insertFromPaste'].includes(event.inputType)
+  const wasCursorAtEnd = isInsertEvent && originalPosition == originalValue.length
+  let lastInsertedChar = isInsertEvent && originalValue[originalPosition - 1]
 
   const newValue = target.value.toLocaleLowerCase()
 
   // set the cursor position to an appropriate location
   let cursorPosition = originalPosition
-  if (isCursorAtEnd) {
+  if (wasCursorAtEnd) {
     cursorPosition = newValue.length
-  } else if (insertedChar) {
-    insertedChar = insertedChar.toLocaleLowerCase()
+  } else if (lastInsertedChar) {
+    lastInsertedChar = lastInsertedChar.toLocaleLowerCase()
 
     let newPosition = cursorPosition
     // if the last inserted char was changed, increment position until find it again
-    while (newPosition <= newValue.length && newValue.charAt(newPosition - 1) !== insertedChar) {
+    while (newPosition <= newValue.length && newValue.charAt(newPosition - 1) !== lastInsertedChar) {
       newPosition++
     }
     // if we didnt find the digit must be an unacceptable char, leave the cursor where it was

tests/directive.test.js

@@ -93,7 +93,7 @@ describe('Directive', () => {
       const newCursorPos = cursorPos + 1 // one new char inserted before
 
       element.selectionEnd = cursorPos
-      wrapper.find('input').trigger('input')
+      wrapper.find('input').trigger('input', { inputType: 'insertText' })
 
       expect(wrapper.element.setSelectionRange).toBeCalledWith(newCursorPos, newCursorPos)
     })
@@ -104,7 +104,7 @@ describe('Directive', () => {
       const newCursorPos = cursorPos + 2 // two new characters after masking
 
       element.selectionEnd = cursorPos
-      wrapper.find('input').trigger('input', { data: '3' })
+      wrapper.find('input').trigger('input', { inputType: 'insertText' })
 
       expect(wrapper.element.setSelectionRange).toBeCalledWith(newCursorPos, newCursorPos)
     })
@@ -115,7 +115,7 @@ describe('Directive', () => {
       const newCursorPos = cursorPos - 1 // needs to move back as 'j' is not an allowed char
 
       element.selectionEnd = cursorPos
-      wrapper.find('input').trigger('input', { data: 'J' })
+      wrapper.find('input').trigger('input', { inputType: 'insertText' })
 
       expect(wrapper.element.setSelectionRange).toBeCalledWith(newCursorPos, newCursorPos)
     })
@@ -128,7 +128,7 @@ describe('Directive', () => {
       element.value = 'ABC-1J|2'
       const cursorPos = element.value.indexOf('|')
       element.selectionEnd = cursorPos
-      wrapper.find('input').trigger('input', { data: 'J' })
+      wrapper.find('input').trigger('input', { inputType: 'insertText' })
       expect(wrapper.element.setSelectionRange).not.toBeCalled()
     })
   })

tests/formatter.test.js

@@ -18,10 +18,6 @@ test('1 -> [(#)]', () => {
   expect(formatter('1', { mask: '[(#)]' })).toMatchObject({ masked: '[(1)]', unmasked: '1' })
 })
 
-test('1 -> #..#', () => {
-  expect(formatter('1', { mask: '#..#', short: true })).toMatchObject({ masked: '1', unmasked: '1' })
-})
-
 test('1 -> #.#', () => {
   expect(formatter('1', { mask: '#.#' })).toMatchObject({ masked: '1.', unmasked: '1' })
 })