Phone Number Field Default Value Not Set When Empty

[shauryag2002]

Description

When clearing a phone number field, the component doesn't set the default value of "+91" as expected. Currently, only the country flag resets but the input field remains empty.

Steps to Reproduce

1. Go to Search Patients tab.
2. Enter a phone number
3. Click on Clear search for clear the phone number field completely
4. Observe that the field remains empty instead of showing "+91"

Expected Behavior

• When field is cleared, it should reset to "+91"
• Indian flag (🇮🇳) should be selected (this part works correctly)

[shauryag2002]

I want to work on this.
Please assign this issue to me.

Fix Implementation

// filepath: /src/components/Form/FormFields/PhoneNumberFormField.tsx
useEffect(() => {
  // Case 1: Field is empty or just has "+"
  if (!field.value || field.value === "+") {
    // Reset to India as default
    setCountry({
      flag: "🇮🇳",
      name: "India",
      code: "91",
    });
    // Set default value "+91" when field is cleared
    setValue("+91");
    return;
  }

  // Case 2: Toll-free number handling
  if (field.value.startsWith("1800")) {
    setCountry({ flag: "📞", name: "Support", code: "1800" });
    return;
  }

  // Case 3: Handle other country codes
  const countryCode = getCountryCode(field.value);
  if (countryCode && phoneCodes[countryCode]) {
    setCountry(phoneCodes[countryCode]);
  }
}, [field.value, setValue]); // Added setValue to deps array

[pyaaraa]

"+91" is getting back , but the country code is not getting back to default ("IN") .
I can work on this , please assign this to me team @Jacobjeevan @rithviknishad

WhatsApp.Video.2025-01-26.at.20.35.06_040529f7.mp4

[nihal467]

the entire component have been changed