Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

PhoneInput: controllable country + detect country from pasted numbers

Đang mở
  • Có gì không ổn?
#31 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
55/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start with the PhoneInput component's selectedCountry state, initialised from defaultCountry via getCountryByCode and COUNTRIES, and read ARCHITECTURE.md for the controlled/uncontrolled pattern and the useControllableState helper. Add country and onCountryChange props, then handle a leading + in the input by matching the longest dial code and stripping the prefix. Done when the acceptance tests pass: a controlled country follows the parent, pasting +44 selects GB, and +1 keeps CA when CA is selected, and the props table in the docs is updated.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement priority: medium

PhoneInput: controllable country + detect country from pasted numbers

Today the selected country is internal state seeded once from defaultCountry:

const [selectedCountry, setSelectedCountry] = React.useState(() => getCountryByCode(defaultCountry) ?? COUNTRIES[0]);

This breaks the library's controlled/uncontrolled convention (see ARCHITECTURE.md) — a parent can't change or reset the country, and changing defaultCountry after mount does nothing.

Proposal
  • Add country / onCountryChange and route both through useControllableState; keep defaultCountry for uncontrolled use.
  • When the user types or pastes a number starting with + (e.g. +44 20 7946 0958), match the longest dial code, switch the country and strip the prefix from the input value.
  • Shared dial codes (+1 US/CA, +7 RU/KZ): keep the currently selected country if it matches, else pick the first.
Acceptance
  • Tests: controlled country follows parent; paste +44… selects GB; +1 keeps CA if CA selected
  • Docs updated with props table
Ngôn ngữ chính
TypeScript
Star
39
Fork
16
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
10

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của babelize/babelize-elements

Tất cả issue của babelize/babelize-elements

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.