DateField does not pass data attributes to the underlying dom node

[jescalan]

Provide a general summary of the issue here

If you pass something like a data-testid prop to the DateField component, it does not pass it through to the underlying input component, making it quite difficult to test against.

🤔 Expected Behavior?

In the documentation for react-aria, it states that all data properties are passed through to the underlying dom node. I'd expect this would be the date for the DateField input as well.

😯 Current Behavior

No data properties are passed through to the underlying input.

💁 Possible Solution

I think this is the line in the code that renders the underlying input, and no props are passed to it. I'm not super familiar with this codebase, but my thought at the moment is that passing through data- properties to this component would fix the problem.

🔦 Context

Would be happy to take a stab at contributing a fix here as well, just want to make sure that this a valid bug report first!

🖥️ Steps to Reproduce

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

<DateField data-testid='foo'>
  <Label>Birth date</Label>
  <DateInput>
    {segment => <DateSegment segment={segment} />}
  </DateInput>
</DateField>

And inspect the underlying input, note that the data property is not present

Version

^1.60

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OSX

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

So the DateField's data-testid is propagated to the root of the DateField, aka the wrapper div that it renders. If you need a data-testid on the DateInput, you should be able to supply a data-testid to the DateInput itself and then query against that.