[RAC] Add `data-placeholder` attribute to input fields as it is done in Select component

[mikhailkollen]

Provide a general summary of the feature here

I am currently working on several input components based on RAC. According to the target designs these components should have specific border styling if:

• They currently do not have value
• They have not had any value entered
• They have a placeholder provided

It was very easy to achieve this with the Select component, since it assigns data-placeholder attribute to SelectValue, but it turned out that other inputs like TextField and NumberField do not have it.

🤔 Expected Behavior?

It would be very beneficial to have a similar behavior for other inputs, so this state can be tracked without interfering with a component value handling logic.

😯 Current Behavior

Select component (data-placeholder attr is added to SelectValue):

TextField component (data-placeholder is not present anywhere):

See CodeSandbox for reference:
https://codesandbox.io/p/devbox/react-aria-components-forked-fxyn7j?workspaceId=ws_EKoPVtiibdNe2oieRn7G9L

💁 Possible Solution

react-spectrum/packages/react-aria-components/src/Select.tsx

Line 283 in 1563243

<span ref={ref} {...DOMProps} {...renderProps} data-placeholder={!selectedItem || undefined}>

[devongovett]

I think you can do this with the CSS :placeholder-shown selector on the input element? https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

[mikhailkollen]

I think you can do this with the CSS :placeholder-shown selector on the input element? https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

Absolutely! Thank you for the suggestion.
Just as an idea, taking into account that Select has the attribute while other inputs don't and that data-hovered is added to the input element, but data-placeholder is not.
If you believe there is no value in adding the attribute (since it is indeed possible to achieve the described behavior via a CSS selector), please, feel free to close the issue :)