jorisre / react-telephone Goto Github PK

I don't know if it is possible but how can we see the value typed or selected country in a form? Especially with formik.

https://arethetypeswrong.github.io/?p=react-telephone%401.4.1

See:

• microsoft/TypeScript#52363
• https://github.com/arethetypeswrong/arethetypeswrong.github.io/blob/main/docs/problems/FalseCJS.md

The most common number format used in China is 3/4/4 (XXX XXXX XXXX). Dash (-) is never used here.

In Google's libphonenumber the metadata is like this:

Id                           ; National           ; Carrier           ; International     ; Local       ; National Prefix Optional ; Comment
...
mobile_3/4/4                 ; "XXX XXXX XXXX"    ; "@ XXX XXXX XXXX" ; "XXX XXXX XXXX"   ;             ;                          ; "Mobile range"
...

I am trying to get the input to work with the hook form controller component and it throws an error when the defaultCountry value is set.

      <Controller
        control={control}
        name="phoneNumber"
        rules={{
          required: 'Please add a phone number',
        }}
        render={({ field, fieldState }) => (
          <Phone {...field} defaultCountry="us">
            <Phone.Country
              className={
                'rounded-br-none rounded-bl-none  focus:border focus:border-gray-300 focus:ring-transparent'
              }
            />
            <Phone.Number
              className={
                'rounded-tr-none rounded-tl-none border-t-0  focus:border focus:border-t-0 focus:border-gray-300 focus:ring-transparent'
              }
            />
          </Phone>
        )}
      />

Here is a sandbox of the issue https://stackblitz.com/edit/github-nhjwbd?file=src/components/samples/ReactHookForm.tsx

Any suggestions or ideas why this may be happening?

1. Open the official demo https://react-telephone.joris.re/
2. Select "United States" in the country dropdown
3. Type "1" into the number input box
4. Press Backspace

Actual result:

Nothing happens.

Browser: Microsoft Edge: 103.0.1264.37 (Official build) (64-bit)

I am receiving the following error message when I am selecting the US as phone number and there is already a number in the input:
Cannot read properties of undefined (reading '3')

See this video here that shows the issue.

It works with other countries. Perhaps it has something to do with the expected format of the input and the German number is too long which was previously in there?

Currently it shows phone numbers like this:

It should be 160 1212123 so it wrongly adds 1 digit too much. Is there a way how I can adjust this or custom render it? One solution could also simply be a setting to deactivate the formatting.

Hi guys,

It seems that there is a compatibility error with older react version (^16.14.0).

ERROR in ./node_modules/react-telephone/dist/react-telephone.modern.js 1:0-56
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\XXXXXX\node_modules\react-telephone\dist' 
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the ppackage.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Bonne journée à vous!