diff --git a/src/containers/internal/views/carriers/form.tsx b/src/containers/internal/views/carriers/form.tsx index 3ec9142..4e30976 100644 --- a/src/containers/internal/views/carriers/form.tsx +++ b/src/containers/internal/views/carriers/form.tsx @@ -906,26 +906,33 @@ export const CarrierForm = ({ const invalidField = e.target as unknown as HTMLInputElement; const fieldName = invalidField.name || invalidField.id; - // Map field names to tabs - if (fieldName === "carrier_name") { - setActiveTab("general"); - } else if (fieldName?.includes("inbound_auth_")) { - setActiveTab("inbound"); - } else if ( - fieldName?.includes("sip_username") || - fieldName?.includes("sip_password") || - fieldName?.includes("sip_realm") || - fieldName?.includes("from_user") || - fieldName?.includes("from_domain") - ) { - setActiveTab("outbound"); // Changed from "registration" to "outbound" - } else if (fieldName?.includes("sip_")) { - setActiveTab("sip"); + // Simple mapping: which tab should this field be on? + let targetTab = "general"; + + if (fieldName?.includes("inbound_auth_")) { + targetTab = "inbound"; + } else if (fieldName?.includes("sip_") || fieldName?.includes("from_")) { + targetTab = "outbound"; } else if (fieldName?.includes("smpp_")) { - setActiveTab("smpp"); + targetTab = "smpp"; } - // Allow the default browser validation message to show + // If we're not on the right tab, switch to it + if (activeTab !== targetTab) { + e.preventDefault(); // Stop the "not focusable" error + setActiveTab(targetTab); + + setTimeout(() => { + const field = + document.getElementById(fieldName) || + document.querySelector(`[name="${fieldName}"]`); + if (field && field instanceof HTMLInputElement) { + field.focus(); + field.scrollIntoView({ behavior: "smooth", block: "center" }); + field.reportValidity(); + } + }, 100); + } }; return ( @@ -1401,122 +1408,164 @@ export const CarrierForm = ({
- + {/* Authentication Fields - shared component */} + {(() => { + const authFields = ( + <> + + 0 + } + onChange={(e) => setSipUser(e.target.value)} + /> + + 0 + } + onChange={(e) => setSipPass(e.target.value)} + /> + + ); + + if (trunkType === "reg") { + return ( +
+
Authentication
+ + Registration trunk requires authentication credentials. + + {authFields} +
+ ); + } else { + return ( + + ); + } + })()}
- + {/* SIP Registration Fields - shared component */} + {(() => { + const sipRegFields = ( + <> + + setSipRealm(e.target.value)} + /> + + setFromUser(e.target.value)} + /> + + setFromDomain(e.target.value)} + /> + + + ); + + if (trunkType === "reg") { + return ( +
+
SIP Registration
+ + Registration trunk requires SIP registration settings. + + {sipRegFields} +
+ ); + } else { + return ( + + ); + } + })()}