useDateSegment crashes for locales whose 12-hour format has no dayPeriod part (e.g. fr-CM)

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#10,833 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

@mangeshraut712 đang làm issue này rồi.

Từ ngày 23/10/2026.

  • #2 của @mangeshraut712 — đã đóng, không merge
  • #10842 của @mangeshraut712 — đang mở

Đánh giá

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

Hướng nghiên cứu

Bắt đầu tại packages/react-aria/src/datepicker/useDateSegment.ts, ở các lượt tra cứu amPmFormatter và dayPeriod được mô tả trong issue. Kiểm tra cách các bước kiểm tra phím AM/PM xử lý khi thiếu khoảng thời gian trong ngày và liệu chúng có chạy cho các segment chỉ có ngày hay không. Tái hiện với locale fr-CM; hoàn thành khi DateField, DatePicker và TimeField hiển thị mà không bị lỗi khi formatter bỏ qua dayPeriod.

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

Mô tả

Provide a general summary of the issue here

DatePicker, DateField and TimeField throw during render when the locale is fr-CM. useDateSegment assumes a 12-hour formatter always outputs a dayPeriod part, but for some locales it doesn't.

🤔 Expected Behavior?

The field renders normally. A locale with no AM/PM marker should at worst make AM/PM typing unavailable, not crash, and a date-only field shouldn't need AM/PM at all.

😯 Current Behavior
TypeError: Cannot read properties of undefined (reading 'value')
    at useDateSegment

packages/react-aria/src/datepicker/useDateSegment.ts (lines 151 and 157 on main):

let amPmFormatter = useDateFormatter({hour: 'numeric', hour12: true});
let am = useMemo(() => {
  let date = new Date();
  date.setHours(0);
  return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod')!.value;
}, [amPmFormatter]);

For fr-CM, ICU returns no dayPeriod part (Node 20, ICU 76):

new Intl.DateTimeFormat('fr-CM', {hour: 'numeric', hour12: true}).formatToParts(new Date(2000, 0, 1, 0))
// [{type: 'hour', value: '0'}]

new Intl.DateTimeFormat('fr', {hour: 'numeric', hour12: true}).formatToParts(new Date(2000, 0, 1, 0))
// [{type: 'hour', value: '0'}, {type: 'literal', value: ' '}, {type: 'dayPeriod', value: 'AM'}]

These memos run for every segment, so a date-only field with no dayPeriod segment crashes too.

💁 Possible Solution

Guard the lookup:

return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod')?.value ?? '';

The startsWith(am, key) / startsWith(pm, key) checks would also need to skip an empty string. Otherwise every key would match, since every string starts with ''. Computing am/pm only when segment.type === 'dayPeriod' would also avoid the work for every other segment.

🔦 Context

Visitors whose browser locale is fr-CM couldn't open a birthdate picker; the field crashed on render. Because the default locale comes from navigator.language, apps hit this without configuring anything. We're working around it by wrapping DateInput in an I18nProvider that falls back from fr-CM to fr when the locale has no day period.

🖥️ Steps to Reproduce
import {I18nProvider} from 'react-aria';
import {DateField, DateInput, DateSegment, Label} from 'react-aria-components';

<I18nProvider locale="fr-CM">
  <DateField>
    <Label>Birthdate</Label>
    <DateInput>{segment => <DateSegment segment={segment} />}</DateInput>
  </DateField>
</I18nProvider>

Or set the browser language to fr-CM and render any DateField without an I18nProvider.

Version

react-aria 3.51.0 / react-aria-components 1.20.0; still present on main.

What browsers are you seeing the problem on?

All

What operating system are you using?

MacOS 26

🧢 Your Company/Team

Planning Center

🕷 Tracking Issue
Ngôn ngữ chính
TypeScript
Star
16k
Fork
1.6k
Merge trung bình
3 ngày 9 giờ
Pull request đã merge (30 ngày)
45

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 adobe/react-spectrum

Tất cả issue của adobe/react-spectrum

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.