ReactJS - MaskedInput adds extra spaces when dealing with Zip code masked input

Question

I have the following code:

import React from "react";
import ReactDOM from "react-dom";
import MaskedInput from "react-text-mask";

import "./styles.scss";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
  }

  render() {
    return (
      <div className="App">
        <h1>Testing the Zip Code</h1>
        <MaskedInput
          className="zip"
          type="tel"
          placeholder="XXXXX"
          placeholderChar={"\u2000"}
          mask={[/\d/, /\d/, /\d/, /\d/, /\d/]}
          name="zip"
          value={this.state.zip}
        />
      </div>
    );
  }
}

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

which creates a masked input for the zip code.

Here you have a live demo: https://codesandbox.io/s/3v18yzn5rm

You can see my problem by doing the following:

Try typing a partial zip code on the input box, e.g.: "123".
Then click outside the input box.
Then click again inside the input box.
You will see that there are two spaces at the end: "123__" (no underscores).
This behavior prevents you to continue typing straigth forward unless you remove those extra spaces.

I need that when I click inside the input box again I have: "123" (no extra spaces).

Any idea on how to achieve that? It is really annoying.

Please, fork the code above with your solution and paste the link here.

Thanks!

did you able to fix this up – Charuka Herath Nov 28 '19 at 09:08 — Charuka Herath, Nov 28 '19 at 09:08

score 0 · Answer 1 · answered Jan 06 '22 at 13:19

My guess is that the package fill all spaces required for the input mask.

I created a package that exposes an input component that displays a masked value according to the mask it receives.

The mask will change keeping the cursor at the correct position (even if you change part of the value in the middle of the input, paste some characters, or delete a part of it, and even if the mask changes).

In your case, you can define the mask 99999 for the zip code.

You can see a live demo with using this package with your case fixed at:

https://codesandbox.io/s/zip-code-forked-igje5?file=/src/index.js

To install the package: npm i react-hook-mask

Use it:

import { MaskedInput, createDefaultMaskGenerator } from 'react-hook-mask';

const maskGenerator = createDefaultMaskGenerator('99999');

const ZipCodeMaskedInput = () => {
    const [value, setValue] = React.useState('');

    return (
        <MaskedInput
            maskGenerator={maskGenerator}
            value={value}
            onChange={setValue}
        />
    );
};

This component wraps a default input, but the package also expose hooks to make you able to use it with any kind of component.

The function createDefaultMaskGenerator that always return a static string mask. You can also use dynamic masks that change according to the value, and even transforming the value (for example, making the characters uppercase).

To see more use cases of the package, you can read the documentation at:

https://www.npmjs.com/package/react-hook-mask

The link below points to a demo with several examples:

https://lucasbasquerotto.github.io/react-masked-input

ReactJS - MaskedInput adds extra spaces when dealing with Zip code masked input

1 Answers1