react-input-mask icon indicating copy to clipboard operation
react-input-mask copied to clipboard

Backspace skips over numbers

Open alexhisen opened this issue 5 years ago • 2 comments

With a mask like (999) 999-9999, if you start Backspacing from the end with all numbers in place, once you remove the last 4 digits, the next Backspace jumps over the number in front of the dash and it remains. Same with the close paren.

This is with the current npm-published version 2.0.4

alexhisen avatar Oct 10 '19 04:10 alexhisen

I faced with same problem on third version

Solnur avatar May 13 '20 18:05 Solnur

Hello guys, I was able to make a workaround for this by using the beforeMaskedStateChange feature, here's the function that I used:

  function beforeMaskedStateChange({ nextState, userInput }) {
    let { value } = nextState
    let selection = nextState.selection
    let cursorPosition = selection ? selection.start : null

    value = value.replace(/_/g, "")

    // keep minus if entered by user
    if (value.endsWith("-") && userInput !== "-") {
      if (cursorPosition === value.length) {
        cursorPosition--
        selection = { start: cursorPosition, end: cursorPosition }
      }
    }

    value = value.replace(/-/g, "").replace(/ /, "").trim()

    if (value.endsWith(")") && userInput !== ")") {
      if (cursorPosition > value.length) {
        cursorPosition -= 2
        selection = { start: cursorPosition, end: cursorPosition }
      }
    }

    return {
      ...nextState,
      selection,
    }
  }

thanatusdev avatar Feb 15 '23 19:02 thanatusdev