PhoneInput: controllable country + detect country from pasted numbers
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 55/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
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.
由索引模型根据 Issue 内容生成。
描述
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/onCountryChangeand route both throughuseControllableState; keepdefaultCountryfor 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 (
+1US/CA,+7RU/KZ): keep the currently selected country if it matches, else pick the first.
Acceptance
- Tests: controlled country follows parent; paste
+44…selects GB;+1keeps CA if CA selected - Docs updated with props table
- 主要语言
- TypeScript
- 星标
- 39
- 派生
- 16
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 10
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
babelize/babelize-elements 的其他 Issue
-
bug website
难度 2/5 1-3 小时 新手友好度 78/100
babelize/babelize-elements#46 ·
维护者通常 1 天内回复
-
bug language-switcher priority: medium
难度 2/5 1-3 小时 新手友好度 72/100
babelize/babelize-elements#26 ·
维护者通常 1 天内回复
-
component enhancement help wanted
难度 5/5 一周以上 新手友好度 35/100
babelize/babelize-elements#47 ·
维护者通常 1 天内回复
-
bug component rtl-layout
难度 3/5 1-2 天 新手友好度 68/100
babelize/babelize-elements#45 ·
维护者通常 1 天内回复
-
Website: revamp and improve the landing page可能已有人在做 @anjalinayak01 于 5 天前认领。 未关闭enhancement help wanted priority: medium website
难度 4/5 一周以上 新手友好度 30/100
babelize/babelize-elements#37 · 已指派 1 人 ·
维护者通常 1 天内回复
查看 babelize/babelize-elements 的全部 Issue
相似的 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 78/100
dsh-market/dsh-market#877 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
stellar/stellar-dev-skill#151 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
area:arcade game ready-for-agent
难度 2/5 1-3 小时 新手友好度 62/100
fderuiter/deruiter.dev#2281 · 1 条评论 ·
维护者通常 1 天内回复
-
scope: data grid type: bug
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 2 天内回复