Fix tel (#123)

* fix: remove placeholder property

* fix code & tell issue

* rebasing

* fix code issue

---------

Co-authored-by: ceelogre <[email protected]>

Author: 2 people

src/components/form/RegisterForm.tsx

@@ -32,6 +32,7 @@ function SignupForm() {
 
   const [fetchedCountries, setFetchedCountries] = useState<Country[]>([]);
   const [filteredCountries, setFilteredCountries] = useState<Country[]>([]);
+  const [selectedCountry, setSelectedCountry] = useState<string>("");
 
   const handleCountrySearch = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const searchTerm = event.target.value.toLowerCase();
@@ -53,10 +54,32 @@ function SignupForm() {
     fetchCountriesData();
   }, []);
 
+
+  const handleCountryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSelectedCountry(value);
+  
+    // Filter countries based on the input
+    const filtered = fetchedCountries.filter((country) =>
+      country.name.toLowerCase().startsWith(value.toLowerCase())
+    );
+    setFilteredCountries(filtered);
+  
+    // If a valid country is selected, update the country code
+    const selectedCountryObj = fetchedCountries.find(
+      (country) => country.name.toLowerCase() === value.toLowerCase()
+    );
+    if (selectedCountryObj) {
+      setValue("countryCode", `${selectedCountryObj.phone}${selectedCountryObj.suffix}`);
+    }
+  };
+  
+
   const {
     register,
     handleSubmit,
     formState: { errors },
+    setValue, 
   } = useForm<formData>({
     resolver: zodResolver(registerSchema),
   });
@@ -108,7 +131,7 @@ function SignupForm() {
             gender: parsedData.gender,
             email: parsedData.email,
             password: parsedData.password,
-            telephone: parsedData.phoneNumber
+            telephone: `${parsedData.countryCode} ${parsedData.phoneNumber}`,
           },
         },
       });
@@ -243,19 +266,21 @@ function SignupForm() {
               </div>
               <div className="flex items-center w-[25vw] gap-10   sm:w-5/6 lg:w-[25vw] justify-between">
                 <div className="w-[50%]">
-                  <InputField
-                    placeholder="Country"
-                    type="text"
-                    {...register("country")}
-                    list="country"
-                    error={errors?.country}
-                  />
-                  <Datalist
-                    id="country"
-                    options={filteredCountries.map((country) => ({
-                      value: country.name,
-                    }))}
+                <InputField
+                  placeholder="Country"
+                  list="countries"
+                  className="w-full rounded-md px-2 py-3 border border-white placeholder:text-gray-400 text-white sm:text-[12px] outline-none autofill:bg-transparent autofill:text-white bg-[#1F2A37]"
+                  {...register("country", {
+                  onChange: (e) => handleCountryChange(e),
+                   })} 
+                  error={errors?.country}
                   />
+                  <datalist id="countries">
+                  {filteredCountries.map((country) => (
+                   <option key={country.code} value={country.name} />
+                  ))}
+                  </datalist>
+
                 </div>
                 <div className="w-[50%] ">
                   <InputField
@@ -278,20 +303,13 @@ function SignupForm() {
 
               <div className="flex items-center w-[25vw] sm:w-5/6 lg:w-[25vw]  justify-between">
                 <div className="w-[20%] ">
-                  <InputField
-                    type="text"
-                    placeholder="+250"
-                    {...register("countryCode")}
-                    className="w-full  rounded-md  px-2 py-3 border border-white placeholder:text-gray-400 text-white sm:text-[12px] outline-none autofill:bg-transparent autofill:text-white bg-[#1F2A37]"
-                    list="countryCodes"
-                    error={errors?.countryCode}
-                  />
-                  <Datalist
-                    id="countryCodes" options={filteredCountries.map((country) => ({
-                      value: country.name
-                    }))}
-                    style={{ cursor: "pointer" }}
-                  />
+                <InputField
+                  placeholder="Country Code"
+                  type="text"
+                  className="w-full rounded-md px-2 py-3 border border-white placeholder:text-gray-400 text-white sm:text-[12px] outline-none autofill:bg-transparent autofill:text-white bg-[#1F2A37]"
+                  {...register("countryCode")}
+                  error={errors?.countryCode}
+                />
                 </div>
                 <div className=" w-[65%]">
                   <InputField