Fix: International phone numbers truncated due to input mask restriction

[Copilot]

Problem

International phone numbers were being truncated when editing Person or Family records. For example, a Finnish phone number +3587570321908 (14 digits) would be shortened to (358) 757-0321 (10 digits) after saving, as shown in the issue screenshot.

Root Cause

The phone input fields use a JavaScript input mask plugin with the pattern (999) 999-9999 (configured via sPhoneFormat), which restricts input to exactly 10 digits. While ChurchCRM had a "Do not auto-format" checkbox that bypassed server-side phone number formatting, it did not disable the client-side input mask. This meant users couldn't physically type more than 10 digits into the field, causing international numbers to be truncated at the browser level before submission.

Solution

Added JavaScript functionality to dynamically toggle the input mask based on the state of the "Do not auto-format" checkbox:

• When checkbox is checked: Input mask is removed, allowing free-form entry up to the database limit (30 characters)
• When checkbox is unchecked: Input mask is applied to enforce the configured format

The JavaScript code:

1. Monitors all three phone fields (Home, Work, Cell) for both Person and Family editors
2. Sets the correct initial state on page load
3. Listens for checkbox state changes and updates the mask accordingly

Implementation Details

PersonEditor.php: Added inline JavaScript that initializes the input mask toggle for all phone fields

function togglePhoneMask(checkboxName, inputName) {
    var checkbox = $('input[name="' + checkboxName + '"]');
    var input = $('input[name="' + inputName + '"]');
    
    function updateMask() {
        if (checkbox.is(':checked')) {
            input.inputmask('remove');  // Allow free-form entry
        } else {
            input.inputmask();  // Re-apply mask
        }
    }
    
    updateMask();  // Set initial state
    checkbox.change(updateMask);  // Listen for changes
}

FamilyEditor.js: Added the same functionality to the existing JavaScript file

Benefits

Automatic Detection

The system already has logic in ExpandPhoneNumber() that detects non-standard phone numbers (including international numbers) and automatically checks the "Do not auto-format" checkbox. With this fix:

1. When editing a record with an international number, the checkbox is auto-checked
2. JavaScript detects this and removes the input mask
3. The full international number is displayed and editable

Backward Compatibility

• US/Canada phone numbers with standard formats continue to work with input masking as before
• No changes to database schema (phone fields already support varchar(30))
• No changes to server-side processing logic
• No impact on existing records or API endpoints

User Experience

Users can now:

• Enter international phone numbers by checking "Do not auto-format" first
• Edit existing international numbers without truncation
• Toggle the checkbox on/off to enable/disable formatting as needed

Testing Recommendations

Test with the Finnish number from the original issue: +3587570321908

1. Create new person: Check "Do not auto-format", enter the international number, save → Verify full number is stored
2. Edit existing person: Open a record with the international number → Verify checkbox is auto-checked and full number displays
3. Toggle checkbox: Uncheck and re-check the box → Verify input mask is applied/removed accordingly
4. US numbers: Verify standard US phone numbers still format correctly with mask when checkbox is unchecked

Files Changed

• src/PersonEditor.php: Added JavaScript to toggle input masks (28 lines)
• src/skin/js/FamilyEditor.js: Added same functionality (27 lines)

Total: 55 lines added, 0 lines removed

Fixes #7480

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Bug: International phone numbers are shortened</issue_title> <issue_description>Description

A clear and concise description of what the reported bug is:

• ChurchCRM version: 5.8.0
• PHP version the server running: 8.3.6
• DB Server and Version the server is running: 11.3.2-MariaDB-1:11.3.2+maria~ubu2204

Steps To Reproduce

📋 Cypress Recorder Results:

cy.visit('http://localhost/v2/dashboard');
cy.xpath('/html/body/div/aside/div/nav/ul/div[1]/a/p/span[1]').click();
cy.url().should('contains', 'http://localhost/PersonEditor.php');
cy.xpath('//*[@id="Gender"]').type('1');
cy.xpath('//*[@id="Gender"]').click();
cy.xpath('//*[@id="FirstName"]').click();
cy.xpath('//*[@id="FirstName"]').type('Jam');
cy.xpath('//*[@id="LastName"]').click();
cy.xpath('//*[@id="LastName"]').type('Roll');
cy.xpath('/html/body/div/div[2]/section[2]/div/form/div[4]/div[2]/div[1]/div[1]/div/input[2]').click();
cy.xpath('/html/body/div/div[2]/section[2]/div/form/div[4]/div[2]/div[1]/div[1]/div/input[1]').type('+3587570321908');
cy.xpath('//*[@id="PersonSaveButton"]').click();
cy.url().should('contains', 'http://localhost/PersonView.php');

The phone number above is fake, but valid for Finland.

Expected behavior

The phone number should not be shortened.

Screenshots and/or logs

If applicable, please include screenshots or share logs to assist in explaining your issue.

📋 Relevant screenshots:

📋 Logs:

None.

Debugging Steps

ℹ️ If you need help debugging, please refer to the wiki for guidance: https://github.com/ChurchCRM/CRM/wiki/Logging-and-Diagnostics.

• What has been done to debug the issue so far?
• Have you looked at the browser's developer tools to see if an error is thrown / network request failed?
• Are there any associated error logs on the backend that get emitted when you attempt to do this action?

Desktop (please complete the following information):

• OS and Version: Arch Linux (rolling release)
• Browser (and Version): Chromium 124.0.6367.49 (Official Build) Arch Linux (64-bit) & Firefox 124.0.2 (64-bit)

Additional context

I first noticed the issue when I edited a CSV imported member. Before the edit their full phone number was displayed, after I clicked save the mangled phone number was saved (I had no been making any changes to the phone number). </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes ChurchCRM/CRM#6987

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.