next-helios-fe 1.8.117 → 1.8.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.117",
+  "version": "1.8.118",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/other/phoneNumber.tsx

@@ -1476,6 +1476,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
 }) => {
   const inputRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLButtonElement>(null);
+  const [tempValue, setTempValue] = useState("");
   const [selectedCountry, setSelectedCountry] = useState("62");
   const [openDropdown, setOpenDropdown] = useState(false);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
@@ -1497,12 +1498,38 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
 
   useEffect(() => {
     if (rest.value) {
+      setTempValue(
+        (rest.value as string).replace(
+          new RegExp(
+            `^${
+              countryPhoneCode.find((item) =>
+                (rest.value as string).startsWith(item.dial_code)
+              )?.dial_code
+            }`
+          ),
+          ""
+        )
+      );
+
       setSelectedCountry(
         countryPhoneCode.find((item) =>
           (rest.value as string).startsWith(item.dial_code)
         )?.dial_code || ""
       );
     } else if (rest.defaultValue) {
+      setTempValue(
+        (rest.defaultValue as string).replace(
+          new RegExp(
+            `^${
+              countryPhoneCode.find((item) =>
+                (rest.value as string).startsWith(item.dial_code)
+              )?.dial_code
+            }`
+          ),
+          ""
+        )
+      );
+
       setSelectedCountry(
         countryPhoneCode.find((item) =>
           (rest.defaultValue as string).startsWith(item.dial_code)
@@ -1542,19 +1569,31 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
               <span className="text-disabled">{`+${selectedCountry}`}</span>
             </div>
             <input
-              type="number"
+              type="text"
               className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
               placeholder="Phone number"
               required={rest.required}
               disabled={rest.disabled}
-              value={((rest.value || "") as string).split(selectedCountry)[1]}
+              value={tempValue || ""}
               onChange={(e) => {
-                rest.onChange &&
-                  rest.onChange({
-                    target: {
-                      value: `${selectedCountry}${e.target.value}`,
-                    } as HTMLInputElement,
-                  } as any);
+                if (/^\d*$/.test(e.target.value)) {
+                  setTempValue(e.target.value);
+
+                  rest.onChange &&
+                    rest.onChange({
+                      target: {
+                        value: `${selectedCountry}${e.target.value}`,
+                      } as HTMLInputElement,
+                    } as any);
+
+                  if (e.target.value.startsWith(selectedCountry)) {
+                    e.target.setCustomValidity(
+                      "Please enter a valid phone number."
+                    );
+                  } else {
+                    e.target.setCustomValidity("");
+                  }
+                }
               }}
             />
           </div>