Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search on country code not working #83

Open
prajwal-kulkarni opened this issue Jun 22, 2023 · 3 comments
Open

Search on country code not working #83

prajwal-kulkarni opened this issue Jun 22, 2023 · 3 comments
Labels
question Further information is requested

Comments

@prajwal-kulkarni
Copy link

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>
@helsonxiao helsonxiao added the question Further information is requested label Jul 4, 2023
@thiarthur
Copy link

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
Copy link
Author

prajwal-kulkarni commented Jul 26, 2023

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
Copy link
Collaborator

Sure. I'll consider the default filter method.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants