refactor(phone-input): simplify with smart country detection#258
Merged
refactor(phone-input): simplify with smart country detection#258
Conversation
Simplified the phone input component by removing complex locale detection and introducing smart, context-aware country detection based on user input behavior. Key changes: - Smart detection: detects country immediately when user types '+' (e.g., +1 → US), or after 10+ digits when typing raw numbers - Removed props: locale, autoDetect, showDialCode (no longer needed) - Always stores value in E.164 format for easy backend integration - NANP (+1) dial code now defaults to US instead of CA - Fixed focus ring clipping issue on Windows devices - Improved formatting logic to properly group digits after country code - Added userTypedPlus state to track explicit '+' input intent Breaking changes: - Removed autoDetect, locale, and showDialCode props - Changed detection behavior to be always smart/contextual
More descriptive variable name that clearly indicates what it checks
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the phone-input component to replace locale-based country detection with smart automatic detection based on the entered phone number itself. The refactor removes several props (locale, autoDetect, showDialCode) and simplifies the API by automatically detecting countries from phone number patterns and formatting numbers on-the-fly.
Changes:
- Removed locale-based automatic country detection in favor of phone number pattern-based detection
- Added automatic phone number formatting (groups digits by 3 with spaces)
- Removed
locale,autoDetect, andshowDialCodeprops from the API - Changed internal value storage to always use "+" prefix format
- Removed the
phone-input-no-auto-detect-demoexample
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/types/docs/phone-input.ts | Removed locale, autoDetect, and showDialCode prop definitions from TypeScript types |
| docs/registry/registry-examples.ts | Removed phone-input-no-auto-detect-demo example registration |
| docs/registry/default/ui/phone-input.tsx | Major refactor: added detectCountryFromNumber and formatPhoneNumber functions, removed locale detection, simplified state management, changed form value format |
| docs/registry/default/examples/phone-input-no-auto-detect-demo.tsx | Deleted example file demonstrating autoDetect=false |
| docs/registry/default/examples/phone-input-demo.tsx | Updated to use controlled state and demonstrate the new automatic formatting |
| docs/registry/default/examples/phone-input-custom-countries-demo.tsx | Updated defaultValue to include country code prefix |
| docs/content/docs/components/phone-input.mdx | Removed documentation about locale detection and autoDetect feature |
| Various JSON files | Line ending normalization (CRLF changes) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.