CODEWITHSUNDEEP
javascriptreactjsreact-hooksformik
Chaim Friedman
Chaim Friedman

Reputation: 6253

Why does the cursor jump to end of the input when using react-input-mask along with formik?

I am trying to use react-input-mask along with formik to mask an input. I have used this masked input outside of formik and it worked as expected, but with formik the values in the input are not getting updated, and the cursor keeps jumping to the end of the input.

Here is a codesanbox to see the issue and code in action.

Here is the code at a glance.

import React from "react";
import ReactDOM from "react-dom";
import { useFormik } from "formik";
import Inputmask from "react-input-mask";
import Yup from "yup";

import "./styles.css";

function App() {
  const formik = useFormik({
    initialValues: {
      dob: ""
    }
  });
  return (
    <Inputmask
      type="text"
      name="dob"
      mask="00-00-0000"
      alwaysShowMask
      onChange={formik.handleChange}
      value={formik.values.dob}
      onBlur={formik.handleBlur}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Where am I going wrong?

Upvotes: 1

Views: 2444

Answers (1)

Nick Friedman
Nick Friedman

Reputation: 459

Your issue is that you're not declaring your mask correctly. If you want to have only numbers the way to declare the mask is by using the number 9. In your case you would declare the mask props as follows:

mask="99-99-9999"

see the docs here https://github.com/sanniassin/react-input-mask#mask

and see working code sandbox here https://codesandbox.io/s/objective-sea-hve91

Upvotes: 2

Related Questions