antd-country-phone-input
antd-country-phone-input copied to clipboard
Search on country code not working
Search on country code by country number/country name not working
I'm using the inline
prop (#73 ) because the select dropdown was disappearing on focus.
My FormItem is as follows:
<Form.Item
name={["contact_information", "primary_contact", "phone_number_cc"]}
id="phone_number_cc"
label={"Phone"}
rules={[
{
validator(rule, value, callback) {
return value.phone &&
!/^(([1-9][0-9]{9})|(0[1-9][0-9]{9}))$/i.test(value.phone)
? Promise.reject(
"Invalid phone number, must be 10 digits mobile number or 11 digits landline number",
)
: undefined;
},
},
{
required: true,
message: "Phone number is required",
},
]}
initialValue={{
short: "in",
}}
>
<CountryPhoneInput inline />
</Form.Item>
I adjusted my filter logic by overwriting filterOption inside selectProps until this issue is properly solved. In my case, i need to find country by name or code, using the beginning of the text.
My example:
<CountryPhoneInput
//yourProps
selectProps={
{
filterOption: (input, option) => filterOption: (input, option) => {
const key = (option?.key.toString()).toLowerCase();
const inputText = input.toLowerCase().trim()
const lastSpaceIndex = key.lastIndexOf(' ');
const name = key.substring(0, lastSpaceIndex);
const code = key.substring(lastSpaceIndex + 1);
return name.startsWith(inputText) || code.startsWith(inputText);
}
}}
/>
I believe it's not the best solution, but it's the only way i've found to have it working.
Thank you @thiarthur , this works as expected. I believe this should be the default behaviour. @helsonxiao could you kindly confirm and fix it in the upcoming versions?
Sure. I'll consider the default filter method.