DateField only triggers onChange if year segment is filled

[hieronymus-jodi]

Provide a general summary of the issue here

When passing an onChange to the DateField component (or when constructing components using the useDateInput hook), the onChange only triggers after the year segment is filled.

🤔 Expected Behavior?

The onChange should trigger when any DateSegment is edited.

😯 Current Behavior

This occurs with DateFields with no initial value. When the user fills out the month and day segments, the onChange is not called. When the user edits the year segment, the onChange is called. After editing the year segment, the user may go back to edit the month and day segments to find that they now call the onChange.

💁 Possible Solution

No response

🔦 Context

We are trying to run validation as the user is filling out a DateField but are unable to do so via the onChange because it's not being called.

🖥️ Steps to Reproduce

Based on the first docs example with an onChange added.

import {DateField, Label, DateInput, DateSegment} from 'react-aria-components';

<DateField onChange={() => {console.log('onChange called')}>
  <Label>Birth date</Label>
  <DateInput>
    {segment => <DateSegment segment={segment} />}
  </DateInput>
</DateField>

Version

3.37.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Also in Firefox and Safari

What operating system are you using?

MacOS - Sequoia 15.2

🧢 Your Company/Team

Figure Technology Solutions

🕷 Tracking Issue

No response

[yihuiliao]

I believe this is intentional. What's happening is that we don't call onChange until the entire DateField is considered "valid" which is when all the segments are set. Assuming your date format is something like MM-DD-YYYY, the date isn't technically valid until you start filling out the year segment. This is the same with native date inputs as well. You might need to drop to useDateSegment if you're looking to validate as the user fills out the form.