material-ui-phone-number icon indicating copy to clipboard operation
material-ui-phone-number copied to clipboard

Bug: disableCountryCode breaks error prop

Open patricktyndall opened this issue 4 years ago • 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

patricktyndall avatar May 10 '20 14:05 patricktyndall

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} 
/>

nataliepatton13 avatar May 17 '21 16:05 nataliepatton13