harish-everest/react-phone-input-mui

Highly customizable phone :telephone_receiver: input component with auto formatting

Hi there, I'm Harish

I am a full-stack software engineer with experience in devops

react-phone-input-mui's Issues

dark mode

Hello, can you help me for DARK MOD, the color of the background does not change.
Thank you

Phone number not visible after using Safari auto fill with countryCodeEditable as false

Hello,

I am rendering PhoneInput component using following properties:

const textFieldStyle: React.CSSProperties = {
  marginTop: 0,
  color: grey[100],
  backgroundColor: "white",
  borderRadius: 5,
};

<PhoneInput
    value={phone}
    onChange={(v: string) => setPhone(`+${v}`)}
    inputStyle={{
      ...textFieldStyle,
    }}
    dropdownStyle={{
      position: "fixed",
      width: "calc(100% - 4rem)",
      maxWidth: 800,
      marginTop: -200,
    }}
    placeholder="2222555666"
    country="us"
    isValid={!phoneError}
    label=""
    countryCodeEditable={false}
    buttonStyle={{ paddingLeft: 2, width: 20 }}
    component={TextField}
  />

When using Safari browser on iPhone, there is an option to auto fill phone numbers but it shows an empty state after entering the phone number.

After debugging a bit, I realized that the auto fill works if countryCodeEditable istrue. When false, onChange listener in the library's component does not receive the e.target.value prefixed with a country code which causes the issue. It would be great if we can find the fix for this issue as lot of users are facing the problem.

Here's a video to demo the issue:
Phone: IPhone 14 Pro
Browser: Safari
React: 18.2
library: [email protected]

phone-input-issue.mp4

Problem with some country formats

Hi,
I've just started testing with different countries and I'm facing the issue that I can't enter correct phone number for some of them
For example

As you can see I've entered 15 digits and I cant enter more, but format tells me that it should be 2 more digits here
So my validation isn't working properly

Issue with label

Hi
After some testing with the new package version, I've found that there are some issues with the label.
(I'm using a TextField with the "filled" variant)
If i pass directly the label or the specialLabel prop to the component, it's rendered outside the component,
If i pass undefined to the same props, it uses "Phone" as the localization string and it's rendered outside,
If i pass the label into the inputProps object, the label is correctly rendered in the TextField but another label is added outside (see the attached image)

If u need more info or a CodeSandbox example I'm there
Thanks in advance

Vite react issue #130

Using viteJs after build and compression package always triggers:

instrument.js:109 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

not working

TS2306: File 'node_modules/react-phone-input-material-ui/index.d.ts' is not a module.

`label` prop not listed in index.d.ts, instead being called `specialLabel`

Flag dropdown not shown

Not sure why but the flag dropdown is not showing, it is only shown as text. Thanks for the library by the way. I am actually copying and pasting your sample from here: https://github.com/harish50/react-phone-input-material-ui-test/blob/main/src/App.js.

The field looks like this:

How would I be able to show the flag dropdown? I tested the base library and use their material.css and it works properly and shows the flag.

Is this repo still maintained?

Tried it out and the first raw example doesn't work.

src/components/mui-phone.tsx:1:39 - error TS2307: Cannot find module '@material-ui/core' or its corresponding type declarations.

1 import { TextField, withStyles } from "@material-ui/core";

Seems like there's no response for over a year and no commit either. Is this abandoned? If so, this should be written.

May crash if double-clicking label

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at r.handleDoubleClick (lib.js?ca16:6:42508)
    ...

Dropdown and flags menu style error

Using this component I'm noticing a problem with style, there is some code or import to fix this?

My import:

import ReactPhoneInput from 'react-phone-input-material-ui';
import 'react-phone-input-material-ui/lib/style.css';

My Code:

<ReactPhoneInput
	name={name}
	disabled={!isEdit}
	value={value}
	component={TextField}
	country="it"
	inputProps={{ variant: 'filled', label, required }}
	fullWidth
	onChange={val => setValue(val)}
	onBlur={onBlur}
	// onKeyDown={e => e.key === 'Enter' && onBlur(e)}
	defaultErrorMessage={!!errorMessage && !isPristine}
	helperText={errorMessage && !isPristine ? errorMessage : null}
/>

defaultCountry is no longer an attribute in index.d.ts

defaultCountry was apparently removed from the original library but the example on npm and on the README still use it, causing confusion.

React 18 in peer-dependencies and use new API

Not working with MUI v4?

I keep getting the following, which seems to be coming from the internal render method of this component:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `t`.

    at div
    at t (http://localhost:3000/static/js/bundle.js:235071:7)
    at FormsyPhone (http://localhost:3000/static/js/bundle.js:7113:5)

Note that FormsyPhone is the component that renders ReactPhoneInput

import ReactPhoneInput from 'react-phone-input-material-ui';

class FormsyPhone extends React.Component {
...
return (
      <ReactPhoneInput
        defaultCountry={'ca'}
        Component={TextField}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        value={getValue() || ''}
        inputProps={fieldProps}
      />
    );

Typescript support

Hello,
can you provide some details on how to use the library with TypeScript? So far I have noticed, that there is no TypeScript module in this library other than the default one provided by react-phone-input, so I created a new .d.ts file with the following snippet:

 declare module 'react-phone-input-material-ui'{
  const ReactPhoneInput: React.FC<any>;
  export default ReactPhoneInput;
 }

Then I managed to display the default TextField:

     <ReactPhoneInput
           component={TextField}
           value={value}
           onChange={(phone: any) => setValue(phone)}
       />

Unfortunately, no countries are displayed in the start adornment:

I am using MaterialUI v5. Thanks in advance.

Support for @mui v5

Are there any plans to add support to this package to @mui v5?
If you need I can help u by making a pull request with the update

Thanks