Contact Number Field Accepts More Than 10 Digits in Create/Update Contact

This commit is contained in:
Kartik Sharma 2025-09-09 12:51:19 +05:30
parent a112886897
commit 6998714fea
2 changed files with 19 additions and 28 deletions

View File

@ -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)}

View File

@ -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