alexplumb / material-ui-phone-number Goto Github PK
View Code? Open in Web Editor NEWFork of react-phone-input-2 for the Material-UI library
License: MIT License
Fork of react-phone-input-2 for the Material-UI library
License: MIT License
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
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!
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)
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';
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
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.
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 :)
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.
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.
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)
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;
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.
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?
When the disableAreaCodes
is enabled, the flag is not been updated according to the area code typed.
Steps to reproduce the bug:
Expected result:
Actual result:
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!
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
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. 💪
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
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.
How to show one flag for one country? The script is showing US/Canada flag for each of the local area.
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})
}
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")
.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
List items have a tab index of "-1" which seems to make them not keyboard focusable
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
.
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} />
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 ?
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/
When MaterialUiPhoneNumber is initialized with value set to a phone number, the country flag is not correct. For example, when value is "+1 (514) 721-2162", 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="+1 (514) 721-2162" />
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.
Would be nice to get an error when certain characters are not met.
Can't find a method to get the country data object
... Also getting errors from react 16,9
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>
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)
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!
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 +9136441644, whereas it should be +919136441655 as 9136441655 is my phone number and country code attached with it should make it +919136441655
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
with autoFormat true, phone number is displayed differently for different country codes.
For e.g.
Is there any way to get country code and mobile number separately?
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
When this library is used in SSR react app, window is not defined
error comes up.
Found that preserveOrder works in React-phone-input-2 but not Material-UI-Phone-Number
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
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",
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.