Exclude country code from "value" when phone input is optional and field is empty

[moonbeam-dev]

After digging through the internet, I found react-international-phone to be the best React phone input component! Kudos! :)

I am using the phone input to generate E164 formatted phone strings with country code.

Does anyone have suggestions on how to generate an empty phone value without country code when the input field is optional and the input field is empty? (i.e. user hasn't inputted any value). That way an empty string is returned for the field instead of the country code for storage.

One workaround I have thought about is a simple if statement to detect if the value is less than 5 characters (including '+' character and max. 3-digit country code), and returning an empty string to be stored when this condition is satisfied. This method works but I'm wondering if the community has ideas on a more elegant solution.

Thank you.

[moonbeam-dev]

If anyone is interested, here is the solution I came up with for an optional phone input with validation.

I am using forceDialCode: true which initializes a dialCode and prevents dialCode deletion, but I want it to be excluded from the phone field on form submission.

Add a dialCode state in your parent component
const [dialCode, setDialCode] = useState('');

Pass setDialCode as a prop to your react-international-phone component:
setDialCode={setDialCode}

In the onChange field of the react-international-phone component, add the following to control the dialCode state in the parent component:

onChange: (data) => {
	onChange(data.phone);
	setDialCode?.(data.country.dialCode);
}

Modify the example isPhoneValid function from the documentation to return true for empty phone string, dialCode, as well as initialized dialCode

const isPhoneValid = (phone: string, dialCode: string) => {
	try {
		// Allow empty string for phone and dialCode as well as intialized dialCode
		if (!phone || !dialCode || phone === `+${dialCode}`) {
			return true;
		}
		return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
	} catch (error) {
		return false;
	}
};

Finally, in your handleSave function you can create a new form object with an empty phone string if the phone is equal to the dial code. This way, your database can store an empty string rather than the dial code

// Ensure phone is an empty string if it matches the dialCode
// Assume that data is your form object data and phone is the property name with the phone string
const phone = data.phone === `+${dialCode}` ? '' : data.phone;
const objectData = { ...data, phone };

Hopefully someone finds this helpful!