fix(web): preserve phone country while typing international numbers#29754
Open
ronit-1404 wants to merge 2 commits into
Open
fix(web): preserve phone country while typing international numbers#29754ronit-1404 wants to merge 2 commits into
ronit-1404 wants to merge 2 commits into
Conversation
Contributor
|
Welcome to Cal.diy, @ronit-1404! Thanks for opening this pull request. A few things to keep in mind:
A maintainer will review your PR soon. Thanks for contributing! |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughThe phone input now infers countries from unambiguous calling-code prefixes, synchronizes selected country state in platform and web variants, and normalizes changed values with a leading 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/components/phone-input/PhoneInput.tsx (1)
29-49: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winAvoid recomputing
getCountries()on every inference call.
getCountries()is invoked again insideinferCountryFromPhoneValue(Line 44) on top of the module-level computation, and the helper runs on every render (Lines 61, 156) and every keystroke viaonChange. Precompute a calling-code → countries map once at module scope so lookups are O(1).♻️ Proposed precomputation
-const COUNTRY_CALLING_CODES = getCountries() - .map((country) => getCountryCallingCode(country).toString()) - .filter((callingCode, index, allCallingCodes) => allCallingCodes.indexOf(callingCode) === index) - .sort((left, right) => right.length - left.length); +const CALLING_CODE_TO_COUNTRIES = getCountries().reduce<Record<string, CountryCode[]>>((acc, country) => { + const callingCode = getCountryCallingCode(country).toString(); + (acc[callingCode] ??= []).push(country.toLowerCase() as CountryCode); + return acc; +}, {}); +const COUNTRY_CALLING_CODES = Object.keys(CALLING_CODE_TO_COUNTRIES).sort( + (left, right) => right.length - left.length +); export const inferCountryFromPhoneValue = (value?: string): CountryCode | undefined => { if (!value) return undefined; const sanitized = value.trim().replace(/[^\d+]/g, "").replace(/^\+?/, "+"); if (!/^\+\d+$/.test(sanitized)) return undefined; const dialingCode = sanitized.slice(1); const matchingCallingCode = COUNTRY_CALLING_CODES.find((callingCode) => dialingCode.startsWith(callingCode)); if (!matchingCallingCode) return undefined; - const matchingCountries = getCountries().filter( - (country) => getCountryCallingCode(country).toString() === matchingCallingCode - ); - - return matchingCountries.length === 1 ? (matchingCountries[0].toLowerCase() as CountryCode) : undefined; + const matchingCountries = CALLING_CODE_TO_COUNTRIES[matchingCallingCode]; + return matchingCountries.length === 1 ? matchingCountries[0] : undefined; };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/components/phone-input/PhoneInput.tsx` around lines 29 - 49, Precompute a calling-code-to-countries map at module scope alongside COUNTRY_CALLING_CODES, using getCountries() once and grouping each country by its calling code. Update inferCountryFromPhoneValue to look up matching countries from that map instead of calling getCountries().filter on every inference, while preserving the existing unique-country return behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/prisma/.env`:
- Around line 17-18: Remove all credential and key values from the tracked .env
file, including DATABASE_URL, DATABASE_DIRECT_URL, NEXTAUTH_SECRET,
CRON_API_KEY, CALENDSO_ENCRYPTION_KEY, and the E2E account password; replace
them with an ignored local environment-file or secret-manager workflow and
ensure the file is excluded from version control. Rotate or revoke every exposed
value if valid.
---
Nitpick comments:
In `@apps/web/components/phone-input/PhoneInput.tsx`:
- Around line 29-49: Precompute a calling-code-to-countries map at module scope
alongside COUNTRY_CALLING_CODES, using getCountries() once and grouping each
country by its calling code. Update inferCountryFromPhoneValue to look up
matching countries from that map instead of calling getCountries().filter on
every inference, while preserving the existing unique-country return behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 84a013bb-d1e6-4fad-a886-27fc39585d0c
📒 Files selected for processing (3)
apps/web/components/phone-input/PhoneInput.test.tsapps/web/components/phone-input/PhoneInput.tsxpackages/prisma/.env
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
1 participant
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.
Fixes #29739
PR description:
This fixes the booking phone input so typing a country calling code directly no longer resets the field back to the US flag or +1 while the user keeps typing. The input now infers and retains the matching country from the typed calling code, so cases like +91... or +371... behave like US input does today.
What changed:
Added country inference from calling-code prefixes in the phone input component.
Persisted the inferred country in component state so it does not snap back between keystrokes.
Covered the behavior with regression tests for +371, +91, and raw-digit entry flows.
Bug fixed:
Direct entry of non-US international numbers would revert to US formatting/default country when the user started typing, especially after entering a calling code or pressing space.
Prefilled calling-code-only values such as +371 now resolve to the correct country instead of defaulting to US.