boyuai / antd-country-phone-input

Country phone input component as standard Ant.Design form item
https://boyuai.github.io/antd-country-phone-input/
60 stars 35 forks source link

Search on country code not working #83

Open prajwal-kulkarni opened 1 year ago

prajwal-kulkarni commented 1 year ago

Search on country code by country number/country name not working Screenshot 2023-06-22 at 2 27 45 PM

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>
thiarthur commented 1 year ago

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.

prajwal-kulkarni commented 1 year ago

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?

helsonxiao commented 1 year ago

Sure. I'll consider the default filter method.