alexplumb/material-ui-phone-number

Fork of react-phone-input-2 for the Material-UI library

material-ui-phone-number's Issues

n.spacing is not a function

Hey Alex,

Getting this error when trying to add the component to my site.

Warning: Material-UI: the `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.

I'm just importing it: import MuiPhoneNumber from 'material-ui-phone-number';

And then using it: <MuiPhoneNumber defaultCountry="us" onChange={this.handleChange} />

Seems like an issue with the Theme and it can't find the spacing? You have any ideas about how to fix this?

Suggestion: Integrate higher-res flags for the selector

Hey, Do you think a better system for the flags could be integrated? Would you be willing to merge it if i make a pull-request?

Look at this high-res screenshot of the application for example. As you see the flags are kinda ugly

Some time ago i did use a script to generate base64 renders of the SVG-flags of this project: https://github.com/lipis/flag-icon-css - for my country-input lib.

This would also fix some flag-related issues with the PNG sprite you're using. For example the wrong mauritania flag

The new flag has red stripes at top+bottom for example

Bug: disableCountryCode breaks error prop

My use case is a US-only phone field that doesn't require the user to type the country code.

If I give disableCountryCode, and then type the first 3 digits of my area code (210), the input has an error border.

<MuiPhoneNumber
	label={'Phone'}
	id={'phone-input'}
	disableCountryCode
	error={false}
	value={phone}
	onChange={value => { setPhone(value); }}
	defaultCountry='us'
	onlyCountries={['us']}
/>

I'm on 2.5.1

Country Menu not attached to field

Hi,

When trying to use the phone number input I am having trouble getting the menu to display under the input like a normal select input. I have managed to reproduce it here.

https://codesandbox.io/s/mui-phone-number-9qomr

Is there a way to get the menu to display like this?

Many thanks

Support for onKeyPressed

Package Versions not appropriately using dependencies vs peer dependencies.

The following dependencies are declared in the package.json for this package.

"dependencies": {
    "@material-ui/core": "^3.9.3",
    "classnames": "^2.2.6",
    "lodash": "^4.17.11",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "peerDependencies": {
    "@material-ui/core": "^3",
    "react": ">=16",
    "react-dom": ">=16"
  }

Ideally you should only have these as peer dependencies. With the current set up when you increment say @material-ui/core to ^3.9.3 but the app that uses it has a version of ^3.9.2 your module will force npm to update the version. Worse, if the app has an exact version of 3.9.2 this will result in the bundle having two versions of material ui as npm will ensure that both versions are matched separately.

So that you can run tests etc you can include the current dependencies in your devDependencies and then list peerDependencies with the minimum required version. If the package really supports material ui 3.* then your current setup will still end up installing 3.9.3 whether it is needed or not.

Drop Down Anchors Somewhere in the A's, Not at the Top of the List

Accessibility: There is no focus state for menu items, making it difficult for keyboard users

List items have a tab index of "-1" which seems to make them not keyboard focusable

flags.png is base64 encoded in dist, but required by styles as file.

In index.jsx:

const styles = () => ({
flag: {
height: 16,
width: 11,
background: 'url("./flags.png")',
},
flagButton: {
minWidth: 30,
padding: 0,
},
positionStart: {
position: 'relative',
},
});

This causes an attempt to load the file itself, even though it is already included in base64 uri.

When upgrading/updating modules it doesn't let me due --> \node_modules\material-ui-phone-number: Appears to be a git repo or submodule.

Hello,
when i was tryin gto upgrade packages in my project it seems yours package blocked the upgrade. When i checked the files in node_modules/material-ui-phone-number it seems it containes .git folder (so the npm thinks its a git submodule and refuses it to remove it or upgrade it ). Could you add it to .gitignore ? or publish it without it ?

error

npm ERR! path C:\web_projects\<project>\node_modules\material-ui-phone-number 
npm ERR! code EISGIT 
npm ERR! git C:\web_projects\<project>\node_modules\material-ui-phone-number: Appears to be a git repo or submodule. 
npm ERR! git     C:\web_projects\<project>\node_modules\material-ui-phone-number
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

Thanks

Wrong documentation

In the documentation, you say that the props containerStyle and inputStyle are options, but after trying to use them (and checking the code) I noticed that those doesn't work.

window is not defined

I am using SSR and I am getting the following error:

ReferenceError: window is not defined
at Object. (D:\dev\myproject\node_modules\material-ui-phone-number\dist\index.js:1:1601)
at Module._compile (module.js:652:30)
at Module._extensions..js (module.js:663:10)
at Object.require.extensions.(anonymous function) [as .js] (D:\dev\peerleap\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)

How to set maxlength and minLength of characters

Would be nice to get an error when certain characters are not met.

Setting State inside onChage does not work.

i can't set state inside the onChange. i have seen this error accured already, but yet no solution found.

phoneInput: (value, country) => { const phoneNum = value; console.log(phoneNum, country); setUser({ ...user, Phone: value }); },
this is the code for the onChange.
the result of this is not error, but a rather weird behavior; the input will not show the number, and in the state it'll update 1 number top ("+9721")

How can I can get the country info (code) from the flag selected in material-ui-phone-number

Can't setState inside onChange function

Hello,

I'm trying to use this but i'm getting an irrational error. First of all, setting the state of anything throws the below errors (see screenshots) and even if that works, i'm unable to use the "value" property to make it a controlled input as it somehow picks it up itself. i would appreciate your input.

@material-ui/core "version": "3.9.0"
react "version": "16.7.0"

Please see my code below;

<FormControl fullWidth={true} className={classes.formControl}>
                                            <InputLabel className={classes.formControl} htmlFor="phoneNumber">Phone
                                                Number
                                            </InputLabel>
                                            <ReactPhoneInput
                                                regions={["europe", "oceania"]}
                                                name="phone"
                                                onChange={this.handleOnChange.bind(this)}
                                                required={true}
                                            />
                                            <Typography align="left" paragraph={true} variant="subtitle2" color="textPrimary" className={classes.smallBlueFont}>{this.state.errors.phone}</Typography>
                                        </FormControl>

where handleOnChange is

handleOnChange(countryCode, value) {
         console.log(1,value, countryCode)

         this.setState({ anything: true})

     }

The drop down arrow refuses to show up for MuiPhoneNumber component

Support the `error` prop

Thank you @alexplumb for creating this! 👍

Please support the error prop like TextField, so that the label and helperText is displayed in red styling like Material UI standard theming.

Thank you very much!

Uncaught TypeError: Cannot set property 'scrollTop' of null

Hi i'm encountering this issue recently:

"react": "^16.10.2",
"@material-ui/core": "^4.5.1",

Probably related to this line of code. Maybe something within React changed:

index.js:2534 Uncaught TypeError: Cannot set property 'scrollTop' of null
at e.scrollTo (index.js:2534)
at e. (index.js:2592)
at callCallback (react-dom.development.js:13936)
at commitUpdateEffects (react-dom.development.js:13976)
at commitUpdateQueue (react-dom.development.js:13964)
at commitLifeCycles (react-dom.development.js:21965)
at commitLayoutEffects (react-dom.development.js:25266)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:465)
at commitRootImpl (react-dom.development.js:25002)
at unstable_runWithPriority (scheduler.development.js:818)

Shows many flags for US/Canada

How to show one flag for one country? The script is showing US/Canada flag for each of the local area.

Flag is not updated with the correct country when disableAreaCodes = true

When the disableAreaCodes is enabled, the flag is not been updated according to the area code typed.

Steps to reproduce the bug:

1. Type +1 438

Expected result:

• The Canada flag should show up since that area code belongs to Canada

Actual result:

• The US flag show up

how to get a country code and mobile number separately

with autoFormat true, phone number is displayed differently for different country codes.
For e.g.

1. India: [phone],
2. US: [phone]
3. HongKong: [phone]

Is there any way to get country code and mobile number separately?

country Code and Phone number

If my phone number starts with country code it itselfs ommit the country code part from my phone number for eg -->
my country code +91 india my phone number 9136441655, it will change it to be [phone], whereas it should be [phone] as 9136441655 is my phone number and country code attached with it should make it [phone]

No types declared for typescript

There's no types declared. Add the following file index.d.ts:

import { TextFieldProps } from '@material-ui/core/TextField';



export type MuiPhoneNumberProps = TextFieldProps & {
    excludeCountries?: string[],
    onlyCountries?:string[],
    preferredCountries?:string[],
    defaultCountry?: string,
    inputClass?: string,
    dropdownClass?:string,
    autoFormat?: boolean,
    disableAreaCodes?: boolean,
    disableCountryCode?: boolean,
    disableDropdown?: boolean,
    enableLongNumbers?: boolean,
    countryCodeEditable?: boolean
} ;
declare const MuiPhoneNumber: React.ComponentType<MuiPhoneNumberProps>;

export default MuiPhoneNumber;

Dropdown way too long and slow

I wish the dropdown to be simpler. The country list is enormous and it takes some time to fully display. I'm thinking you have all the options in dropdown because you want to differentiate between Canada country codes and US country codes. However, I think you should place just one instance of United States and one instance of Canada and let the user decide what area code to put, then according to the area code typed in, then change the flag. Also, if you do select an area code from the dropdown, the autoformatting doesn't work. So essentially selecting country code + area code from the list doesn't work. The plugin looks very promising though. Thank you for this. 💪

Getting "Super expression must either be null or a function" After Building And Deploying

I'm gettting Super expression must either be null or a function
Versions
"@material-ui/core": "^4.4.0",
"react": "^16.9.0",
"material-ui-phone-number": "^2.2.2",

InputClass styles do not get applied at all

I am unable to apply styles to the textfield. see example bellow:

const styles = (theme: Theme) => createStyles({
muiPhoneNumberClass: {
width: '250px',
},
});

<MuiPhoneNumber InputClass={classes.muiPhoneNumberClass} defaultCountry={'gb'} onlyCountries={['gb']} onChange={setMobileNumber} />

Side Note: Please do remove your .git folder as npm complains when we try to do another install of another package.

preserveOrder does not work in Material-UI-Phone-number

Found that preserveOrder works in React-phone-input-2 but not Material-UI-Phone-Number

https://codesandbox.io/s/zealous-black-mmdwx

How to set fullWidth

Hi Great package and amazing work, I was wondering what the best approach would be to set the input field to be full width to match the rest of my inputs attached screenshots.

Setting inputRef causes the app to crash when changing value

When using inputRef property for the component, an exception is thrown when changing the value of the text field.

For example:
<MuiPhoneNumber label="Phone" name="phoneNumber" inputRef={register()} />

Uncaught TypeError: Cannot read property 'focus' of undefined

followed by

Uncaught TypeError: Cannot read property 'setSelectionRange' of undefined at e.<anonymous> (index.js:1) at callCallback (react-dom.development.js:12490) at commitUpdateQueue (react-dom.development.js:12511) at commitLifeCycles (react-dom.development.js:19858) at commitLayoutEffects (react-dom.development.js:22803) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at commitRootImpl (react-dom.development.js:22541) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at commitRoot (react-dom.development.js:22381) at finishSyncRender (react-dom.development.js:21807) at performSyncWorkOnRoot (react-dom.development.js:21793) at react-dom.development.js:11089 at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at flushSyncCallbackQueueImpl (react-dom.development.js:11084) at flushSyncCallbackQueue (react-dom.development.js:11072) at flushPendingDiscreteUpdates (react-dom.development.js:21847) at flushDiscreteUpdates (react-dom.development.js:21827) at finishEventHandler (react-dom.development.js:764) at batchedEventUpdates (react-dom.development.js:798) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568) at attemptToDispatchEvent (react-dom.development.js:4267) at dispatchEvent (react-dom.development.js:4189) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at discreteUpdates$1 (react-dom.development.js:21887) at discreteUpdates (react-dom.development.js:806) at dispatchDiscreteEvent (react-dom.development.js:4168)

Window is not defined

Fails when building site with Gatsby.
WebpackError: ReferenceError: window is not defined

I've managed to solve the problem by not doing any server side rendering with this module. Just importing it at runtime atm.

Please add 'undefined' !== typeof window check

Dropdown on IOS not focus

There are some issues when using the dropdown on IOS. It seems the problem is that the dropdown is positioned before the soft-keyboard is removed and therefore centered outside the screen. Also sometimes dragevents are sent to the page below.

Increasing the flag size

Is there any way to increase the size of the flag ? I am stuck with it any changes I do to the width and height, other flags starts exposing as it is basicaly one chunk of image containing all the flags ?

Change masks (support for custom masks)

Is it possible somehow to add support for custom masks, like react-phone-input-2 has or change a mask in another way?

https://github.com/bl00mber/react-phone-input-2#custom-masks

I have a problem with the mask used for Sweden as they have a lot of different formats and the current one leaves users entering another format in doubt if it will work.

Thanks :)

In use this cpmonent material ui theme to change default

In use this cpmonent material ui theme to change default
<MuiPhoneNumber defaultCountry={'ru'} onChange={this.tellChange} fullWidth id="outlined-bare" placeholder={"Номер телефона"} margin="dense" variant="outlined" inputClass={""} name={"phone"} value={this.state.phone} error={this.state.phoneError} helperText={this.state.phoneErrorText} required />

used this component
https://i.imgur.com/2ODyMbu.png
not use this component
https://i.imgur.com/nvrl2Wh.png

not working
https://material-ui.com/customization/globals/

missing "margin" prop for TextField

Hello!

Thanks a lot for this component!
i just noticed that the prop "margin" for TextField is missing.
check here https://material-ui.com/api/text-field/#textfield-api

is it possible to add it?
thanks!

Menu appears at top-left of the screen

Hi,

I have the following issue when using this component inside my app, not sure though what's the problem.

Menu appears at top-left of the screen.

Reference error when used in server side rendering app

When this library is used in SSR react app, window is not defined error comes up.

Wrong country flag is shown when component is initialized with value prop

When MaterialUiPhoneNumber is initialized with value set to a phone number, the country flag is not correct. For example, when value is "[phone]", the flag is US even though this is a Canadian phone number. The Canadian flag will be shown only if I start editing the field.

Steps to reproduce:
Initialize a MaterialUiPhoneNumber component with value:
<MaterialUiPhoneNumber defaultCountry="us" value="[phone]" />
Observed: US flag is shown but number is Canadian.
Expected: Canadian flag should be shown

If I started editing the field, then the Canadian flag will be displayed correctly, but I expect the Canadian flag to be shown at the beginning too, since this is a Canadian number.

Wrong instructions

You are instruction to
npm install material-ui-phone-input --save

Whilst you have renamed the project to material-ui-phone-number

So, all you have to do is:
npm install material-ui-phone-number --save

CSS class name ".flag" conflicts with my app's classes

.flag is a very common class name. Please namespace it so it does not conflict.

For example, change it to .MuiPhoneNumber__flag instead of .flag

inputProps not applied to input but to div container

Problem
inputProps is applied to MuiInputBase-root.

Consequence
This causes an issue with e.g. tabIndex and aria-labels.

Solution
inputProps should be applied to MuiInputBase-input.

Demo
https://stackblitz.com/edit/react-dmwtbs

native selection doesn't set value for dropdown

Hello!

I'm using this component with native:true. I set "fr" as default country.
I figured out that "Afghanisthan" is checked instead of "France" in the dropdown.

What should i do? Did i forget something?
Thanks a lot!

Get Country Data

Can't find a method to get the country data object... Also getting errors from react 16,9

NextJS: input disappear in production env

Since version 2.2.0 using NextJS (9.1.1), the field disappear in production environment.

Note: I use formik and formik-material-ui.

...
import dynamic from 'next/dynamic';
const MuiPhoneNumber = dynamic(import('material-ui-phone-number'), { ssr: false });
...
const PhoneNumberInput = ({ field, form, ...other }) => {
      const currentError = form.errors[field.name];
    
      return (
        <MuiPhoneNumber
          preferredCountries={['fr', 'us', 'es', 'uk', 'it', 'se']}
          defaultCountry={'fr'}
          countryCodeEditable={false}
          name={field.name}
          value={field.value}
          helperText={currentError}
          disabled={form.isSubmitting}
          error={Boolean(currentError)}
          onError={error => {
            // handle as a side effect
            if (error !== currentError) {
              form.setFieldError(field.name, error);
            }
          }}
          onChange={value => {
            value = value.replace(/^\+33 0 ?([1-9])/, '+33 $1');
            form.setFieldValue(field.name, value, false);
          }}
          {...other} />
      );
    };

...
                <Form>
                    ...
                    <Field name="name" autoComplete="new-password" label="Name" component={TextField} fullWidth margin="normal" required={true} />
                    <Field name="phone" autoComplete="new-password" label="Phone" component={PhoneNumberInput} fullWidth margin="normal" required={true} />
                   ...
                </Form>

Is there a way to override style?

Hi everyone 👋

Firstly, thanks for this library, it is very cool. I would like to know if is there a way to override style property like main color? I saw that the library use the default material-ui theme and I didn't find anything to override it. In a perfect world, that could be very cool to be able to pass our material-ui theme to override default one.

Thank you very much!

Material UI import results in broad inclusion of packages

In https://github.com/alexplumb/material-ui-phone-number/blob/master/src/components/index.jsx the following code results in the entire material ui library being included as a dependency

import {
  TextField, InputAdornment, Button, Menu, Divider, RootRef,
} from '@material-ui/core';

Ideally this would only include the desired components and the material ui folks could probably make that better....but for now if you include explicitly the size of the install package would be greatly reduced.

import Button from '@material-ui/core/Button'; 
import Divider from '@material-ui/core/Divider'; 
import InputAdornment from '@material-ui/core/InputAdornment';
import Menu from '@material-ui/core/Menu';
import RootRef from '@material-ui/core/RootRef';
import TextField from '@material-ui/core/TextField'; 

Crashes the app if field left empty

If the user tries to delete the entire phone number, it stays only '+' which is annoying.
More problematic, if he try to exit the form, the app crashes with this error:

index.js:2526 Uncaught TypeError: Cannot read property 'dialCode' of undefined
    at e.updateDefaultCountry (index.js:2526)
    at e.value (index.js:2945)

Here is my code
<MuiPhoneNumber className={classes.phoneInput} style={{ width: formInputWidth }} defaultCountry={defaultCountryCode} disableAreaCodes={true} placeholder="Mobile number" value={props.phone} onChange={onChangePhone} label={'Mobile'} error={props.tfa && !props.phone} helperText={props.tfa && !props.phone ? t('validation.requiredField') : ''} required={props.tfa} localization={localization} />

Switch to 2.2.0 from 2.1.0 broke the app for some reason

This is the error i'm getting with 2.2.0 which does not happen with 2.1.0

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

e.updateFormattedNumber

Uncaught TypeError: Super expression must either be null or a function

Probably the core issue is the same as with the react-phone-input-2: bl00mber/react-phone-input-2#126

This only happens when you build the bundle with node_env PRODUCTION.