From 6998714fea3d13a688730891481abe67f3beb6da Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 9 Sep 2025 12:51:19 +0530
Subject: [PATCH] Contact Number Field Accepts More Than 10 Digits in
 Create/Update Contact

---
 src/components/Directory/ManageDirectory.jsx | 38 ++++++--------------
 src/components/Directory/UpdateContact.jsx   |  9 ++++-
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/components/Directory/ManageDirectory.jsx b/src/components/Directory/ManageDirectory.jsx
index 5c858815..6b7cf8ff 100644
--- a/src/components/Directory/ManageDirectory.jsx
+++ b/src/components/Directory/ManageDirectory.jsx
@@ -40,7 +40,7 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   const { designationList, loading: designloading } = useDesignation();
   const { contactTags, loading: Tagloading } = useContactTags();
   const [IsSubmitting, setSubmitting] = useState(false);
-  const [showSuggestions,setShowSuggestions] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(false);
   const [filteredDesignationList, setFilteredDesignationList] = useState([]);
   const dispatch = useDispatch();
 
@@ -132,6 +132,12 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
     setValue("designation", val);
   };
 
+  // Handle phone number input to only allow numbers and max length of 10
+  const handlePhoneInput = (e) => {
+    const value = e.target.value.replace(/[^0-9]/g, "");
+    e.target.value = value.slice(0, 10);
+  };
+
 
   const toggleBucketId = (id) => {
     const updated = watchBucketIds?.includes(id)
@@ -277,23 +283,11 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
                       placeholder="email@example.com"
                     />
                     {index === emailFields.length - 1 ? (
-                      // <button
-                      //   type="button"
-                      //   className="btn btn-xs btn-primary ms-1"
-                      //   onClick={handleAddEmail}
-                      //   style={{ width: "24px", height: "24px" }}
-                      // >
                       <i
                         className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={handleAddEmail}
                       />
                     ) : (
-                      // <button
-                      //   type="button"
-                      //   className="btn btn-xs btn-danger ms-1 p-0"
-                      //   onClick={() => removeEmail(index)}
-                      //   style={{ width: "24px", height: "24px" }}
-                      // >
                       <i
                         className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={() => removeEmail(index)}
@@ -335,29 +329,19 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
-                      type="text"
+                      type="tel"
                       className="form-control form-control-sm"
                       {...register(`contactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
+                      onInput={handlePhoneInput}
+                      maxLength={10}
                     />
                     {index === phoneFields.length - 1 ? (
-                      // <button
-                      //   type="button"
-                      //   className="btn btn-xs btn-primary ms-1"
-                      //   onClick={handleAddPhone}
-                      //   style={{ width: "24px", height: "24px" }}
-                      // >
                       <i
                         className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
                         onClick={handleAddPhone}
                       />
                     ) : (
-                      // <button
-                      //   type="button"
-                      //   className="btn btn-xs btn-danger ms-1"
-                      //   onClick={() => removePhone(index)}
-                      //   style={{ width: "24px", height: "24px" }}
-                      // >
                       <i
                         className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
                         onClick={() => removePhone(index)}
@@ -504,4 +488,4 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
   );
 };
 
-export default ManageDirectory;
+export default ManageDirectory;
\ No newline at end of file
diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx
index 9d74fc35..8e357928 100644
--- a/src/components/Directory/UpdateContact.jsx
+++ b/src/components/Directory/UpdateContact.jsx
@@ -121,6 +121,11 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
     setValue("designation", val);
   };
 
+  const handlePhoneInput = (e) => {
+    const value = e.target.value.replace(/[^0-9]/g, "");
+    e.target.value = value.slice(0, 10);
+  };
+
   const watchBucketIds = watch("bucketIds");
 
   const toggleBucketId = (id) => {
@@ -377,10 +382,12 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
-                      type="text"
+                      type="tel"
                       className="form-control form-control-sm"
                       {...register(`contactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
+                      onInput={handlePhoneInput}
+                      maxLength={10}
                     />
                     {index === phoneFields.length - 1 ? (
                       // <button