CODEWITHSUNDEEP
javascriptreactjsinput
howard wolowitz
howard wolowitz

Reputation: 628

React-input-mask inability to paste correct phone

My input has following code

<InputMask
                        id='phone'
                        name='phone'
                        type='tel'
                        value={this.state.phone}
                        mask='+63(\999) 999-99-99'
                        maskChar='X'
                        onChange={(e: SyntheticEvent<HTMLInputElement>): void => {
                            this.setState({
                                phone: e.currentTarget.value.replace(/[^\d.+]/g, ''),
                            });
                        }}
                        onBlur={this.validateInput}
                        onPaste={(e) => this.handlePaste(e)}
                        className='form-control'
                        placeholder='Your Phone'
                    />

here +639 digits that can not be deleted. But when I try to paste phone number I get incorrect phone. For example i paste +639055943784 and get +63(963) 963-90-55 which is not desired result. My paste handler is

    handlePaste = (e) => {
    this.setState({phone: e.clipboardData.getData("Text")})
}

Upvotes: 4

Views: 2920

Answers (2)

Lucas Basquerotto
Lucas Basquerotto

Reputation: 8053

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).

I created a live demo for your use case, using the mask +63(9XX) XXX-XX-XX and defining custom mask rules that uses X as the user provided characters (instead of 9, because you want a digit 9 static in the mask) and associated it with a regex that only accepts a digit/number:

https://codesandbox.io/s/react-phone-mask-70fwc?file=/src/index.js:123-141

import React from "react";
import { MaskedInput } from "react-hook-mask";

const mask = "+63(9XX) XXX-XX-XX";
const maskGenerator = {
  rules: new Map([["X", /\d/]]),
  generateMask: () => mask
};

const PhoneMaskedInput = () => {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <p>Phone Number:</p>
      <MaskedInput
        maskGenerator={maskGenerator}
        value={value}
        onChange={setValue}
      />
      <p>Value: {value ? "+639" + value : undefined}</p>
    </div>
  );
};

You can see a demo with several examples at:

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

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

This component wraps a default input, but the package also expose hooks to make you able to use it with any kind of component as well as the option to use dynamic masks and dynamic rules (as in the example above).

You can see more information about the package at:

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

Upvotes: 1

Sabit Rakhim
Sabit Rakhim

Reputation: 460

Try that one

handlePaste = (e) => {
  const number = e.clipboardData.getData("Text");
  const formattedNumber = number.replace(/639+/i, '')
  this.setState({phone: formattedNumber})
}

There also could be edge cases when pasted value will contain another 639s, but I think you can fetch it independently

Upvotes: 2

Related Questions