CODEWITHSUNDEEP
reactjs
mekings
mekings

Reputation: 446

Formatting and Setting Phone Number in input field in reactjs

Hello I am quite a beginner in reactjs.

My current use case is very simple, I have an input field that is to accept a phone number and format it as the user is typing.Unfortunately it turns out that the input fields freezes and refuses to accept further inputs as I start formatting

Here is my code

import { parsePhoneNumberFromString } from 'libphonenumber-js';

export default function UpdatePhoneDetails() {
  const [phoneNumber, setPhoneNumber] = useState('');

  const updatePhoneNumber = (value) => {
    const newPhoneNumber = parsePhoneNumberFromString(value, 'NG');
    if (newPhoneNumber) {
      const formattedNumber = newPhoneNumber.number;
      const valid = newPhoneNumber.isValid();
      if (valid) {
        setPhoneNumber(formattedNumber); //The input field seems to be freezing here
      }
    }
  };

  return (
    <TextField
      variant="outlined"
      required
      fullWidth
      id="phonenumber"
      label="Phone Number"
      name="phonenumber"
      autoFocus
      value={phoneNumber}
      defaultValue={phoneNumber}
      disabled={updating}
      autoComplete="phonenumber"
      onChange={(event) => updatePhoneNumber(event.target.value)}
    />
  );
}

Thanks for your anticipated help.

Upvotes: 2

Views: 5250

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11305

updatePhoneNumber function only updates value if phone number is valid so when the user is still typing it won't let you do any changes.

You can set error if phone number is invalid and replace text with newPhoneNumber.number otherwise

const { TextField } = window.MaterialUI;
const { useState, useEffect } = React;
const { parsePhoneNumberFromString } = libphonenumber;
//console.log(Object.keys(libphonenumber));

const App = () => {
  const [text, setText] = useState('');
  const [error, setError] = useState(null);

  const onChange = ({target: {value}}) => {
    let valid = true;
    const newPhoneNumber = parsePhoneNumberFromString(value, "NG");
  
    if (newPhoneNumber) {
      valid = newPhoneNumber.isValid(); 
      
      if(valid) {
        value = newPhoneNumber.number;
      }
    }
    
    setError(!valid);
    setText(value);
  }

return <div>
  <TextField
    variant="outlined" 
    required
    fullWidth
    id="phonenumber"
    label="Phone Number"
    name="phonenumber"
    error={!!error}
    helperText={error && 'Invalid phone number'}
    autoFocus
    value={text}
    onChange={onChange}>
  </TextField>
</div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.7.52/libphonenumber-js.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/[email protected]/material-ui-lab.development.js"></script>
<div id="root"></div>

Upvotes: 1

Related Questions