alexplumb/material-ui-phone-number

Bug: disableCountryCode breaks error prop

Opened this issue · 1 comments

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

I found a temporary workaround for this by overriding the default isValid prop to always return true:

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