viclafouch / mui-tel-input

📌 A phone number input designed for MUI (Material ui) V6 built with libphonenumber-js
https://viclafouch.github.io/mui-tel-input
MIT License
160 stars 65 forks source link

Phone Validation Issue with matchIsValidTel #94

Closed bliu13 closed 11 months ago

bliu13 commented 12 months ago

I've tried using the provided validation function matchIsValidTel and it looks like it may not be behaving correctly. When I tried to validate a US number, it seemed to be validating one number short.

Correct US Number Format: +1 212 111 1111 (11 numbers) Validation Only Accepts: +1 212 111 111 (10 numbers)

import React from 'react'
import { MuiTelInput, matchIsValidTel } from 'mui-tel-input'

const MyComponent = () => {
  const [value, setValue] = React.useState('+12121111111')

  const handleChange = (newValue, info) => {
    console.log(matchIsValidTel(newValue)) // boolean
  }

  return (
    <MuiTelInput
            id="contact-telephone"
            inputProps={{ 'data-testid': 'contact-telephone' }}
            name="telephone"
            label="Telephone"
            fullWidth
            variant="outlined"
            defaultCountry="US"
            preferredCountries={['US']}
            forceCallingCode
            disableFormatting
            flagSize="medium"
            value={values.telephone}
            onChange={handleChange}
            error={!!errors.telephone}
            helperText={errors.telephone}
          />
  );
}
viclafouch commented 11 months ago

Hey

This function comes from libphonenumber-js, so I think you should create an issue for this library, not mui-tel-input.

Victor

bliu13 commented 10 months ago

Hi @viclafouch, I've just got around to test libphonenumber-js directly and according to the their documentation, the library's isValidNumber() will return false on the example US phone number I gave.

Here's the original Google implementation behavior. It looks there are other functions that could be used: isPossibleNumber() and isPossibleShortNumber(). Would it make sense to also re-export those in mui-tel-input?

viclafouch commented 10 months ago

Hello @bliu13 !

Good point, and you're right. But, in order to avoid increasing the size of the mui-tel-input package, I think that for a few rare cases like yours, it's better to install libphonenumber-js in your project and import the method yourself.

This will prevent all mui-tel-input users from seeing the package size increase for a function that is not useful.

What do you think ? :)