Skip to content

Fix phone input handling of 11-digit autofilled numbers with leading 1 #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 20, 2025
Merged

Fix phone input handling of 11-digit autofilled numbers with leading 1 #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions apps/docs/src/remix-hook-form/phone-input.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,21 @@ describe('PhoneInput Component', () => {
});
});

it('handles 11-digit US numbers with leading 1 (autofill case)', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);

const usaPhoneInput = screen.getByLabelText('USA Phone Number') as HTMLInputElement;

// Simulate autofill with 11 digits starting with 1
await user.type(usaPhoneInput, '12025550123');

// Should format correctly by removing the leading 1
await waitFor(() => {
expect(usaPhoneInput.value).toBe('(202) 555-0123');
});
});

it('accepts international number with + and inserts spaces', async () => {
const user = userEvent.setup();
render(<TestPhoneInputForm />);
Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
"name": "forms",
"version": "0.2.0",
"private": true,
"workspaces": ["apps/*", "packages/*"],
"workspaces": [
"apps/*",
"packages/*"
],
"scripts": {
"start": "yarn dev",
"dev": "turbo run dev",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@lambdacurry/forms",
"version": "0.19.4",
"version": "0.19.5",
Copy link

@coderabbitai coderabbitai bot Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Version bump looks right; confirm presence of a changeset and cross-package alignment.

Patch bump to 0.19.5 matches the scope of the fix. Please verify a corresponding changeset exists and that no other packages pin a mismatched version to this package.

Run this script to check for a changeset mentioning @lambdacurry/forms and to list internal dependents that reference it:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Check for Changesets mentioning @lambdacurry/forms =="
fd -H -a -t f .changeset | xargs -r rg -n "@lambdacurry/forms" -n -C1 || echo "No changeset found mentioning @lambdacurry/forms"

echo
echo "== List packages that depend on @lambdacurry/forms (deps/peerDeps/devDeps) =="
fd package.json packages apps | while read -r f; do
  jq -r --arg name "@lambdacurry/forms" '
    .name as $pkg
    | {deps: .dependencies?[$name], peer: .peerDependencies?[$name], dev: .devDependencies?[$name]}
    | select(.deps or .peer or .dev)
    | [$pkg, (if .deps then "deps" else (if .peer then "peerDeps" else "devDeps" end) end), ( .deps // .peer // .dev )]
    | @tsv
  ' "$f" 2>/dev/null | awk -v file="$f" -F'\t' '{ print file ": " $0 }'
done || true

Length of output: 1372

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Package name and version from packages/components/package.json:"
jq -r '.name, .version' packages/components/package.json

Length of output: 241

Add missing changeset and align internal dependency version

It looks like there’s no changeset recording the bump to 0.19.5 for @lambdacurry/forms, and one internal consumer is still using a loose “*” range.

Please address the following before merging:

  • Add a new changeset under .changeset/ that bumps @lambdacurry/forms to 0.19.5 with a brief description of the fix.
  • In apps/docs/package.json, update the dependency on @lambdacurry/forms from "*" to match the new version range (e.g. "^0.19.5").
🤖 Prompt for AI Agents 
In packages/components/package.json around line 3, the package was bumped to
0.19.5 but there is no changeset and an internal consumer uses a loose "*"
range; add a new changeset file under .changeset/ (e.g.,
yyyy-mm-dd-bump-forms.md) that lists @lambdacurry/forms bumped to 0.19.5 with a
one-line description of the fix, and then update apps/docs/package.json to
change the @lambdacurry/forms dependency from "*" to the matching
semver-compatible range (for example "^0.19.5") so internal consumers align with
the new version.

"type": "module",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
Expand Down
33 changes: 27 additions & 6 deletions packages/components/src/ui/phone-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,14 @@ function extractDigits(input: string): string {
}

function formatUS(digits: string): string {
const d = digits.slice(0, 10);
// Handle case where an 11-digit number with leading "1" is provided (common in autofill)
let d = digits;
if (digits.length === 11 && digits.startsWith('1')) {
d = digits.slice(1); // Remove the leading "1" country code
} else {
d = digits.slice(0, 10); // Otherwise just take first 10 digits as before
}

if (d.length === 0) return '';
if (d.length <= 3) return `(${d}`;
if (d.length <= 6) return `(${d.slice(0, 3)}) ${d.slice(3)}`;
Expand Down Expand Up @@ -62,7 +69,8 @@ export const PhoneNumberInput = ({
const formatted = typer.input(normalized);
setDisplay(formatted);
} else {
const digits = extractDigits(String(value)).slice(0, 10);
// Remove the slice(0, 10) to allow handling 11-digit numbers with leading 1
const digits = extractDigits(String(value));
setDisplay(formatUS(digits));
}
}, [value, isInternational]);
Expand All @@ -80,10 +88,19 @@ export const PhoneNumberInput = ({
return;
}

const digits = extractDigits(raw).slice(0, 10);
// Remove the slice(0, 10) to allow handling 11-digit numbers with leading 1
const digits = extractDigits(raw);
// Handle case where an 11-digit number with leading "1" is provided
let normalizedDigits = digits;
if (digits.length === 11 && digits.startsWith('1')) {
normalizedDigits = digits.slice(1); // Remove the leading "1" country code
} else {
normalizedDigits = digits.slice(0, 10); // Otherwise just take first 10 digits
}

const formatted = formatUS(digits);
setDisplay(formatted);
onChange?.(digits || undefined);
onChange?.(normalizedDigits || undefined);
};

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
Expand All @@ -92,13 +109,17 @@ export const PhoneNumberInput = ({
const isNumberKey = NUMBER_KEY_REGEX.test(e.key);
const isModifier = e.ctrlKey || e.metaKey || e.altKey;
const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End', 'Enter'];
if (!isModifier && isNumberKey && currentDigits.length >= 10) {

// Allow typing if we have fewer than 10 digits or if we have 11 digits but the first is '1'
const isComplete = currentDigits.length >= 10 && !(currentDigits.length === 11 && currentDigits.startsWith('1'));

if (!isModifier && isNumberKey && isComplete) {
// Prevent adding more digits once 10-digit US number is complete
e.preventDefault();
return;
}
if (allowed.includes(e.key)) return;
// Allow other typical keys; restriction handled by formatting and slice(0,10)
// Allow other typical keys; restriction handled by formatting
}
};

Expand Down