bug: IonInput has no placeholder text when type="time"

[Shruti2906]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

"Time" placeholder not being displayed. The input shows up with an empty(__:__) placeholder. ### Expected Behavior That the placeholder would show up in the input, before a time is selected. ### Steps to Reproduce Create an IonInput with the following (tried both undefined and null) and neither resulted in the placeholder showing up. ### Code Reproduction URL _No response_ ### Ionic Info ionic info Ionic: Ionic CLI : 7.1.1 (C:\Users\codin\AppData\Roaming\nvm\v16.20.2\node_modules\@ionic\cli) Ionic Framework : @ionic/react 7.5.6 Capacitor: Capacitor CLI : 5.6.0 @capacitor/android : 5.5.1 @capacitor/core : 5.5.1 @capacitor/ios : 5.5.1 Utility: cordova-res : not installed globally native-run : 2.0.1 System: NodeJS : v16.20.2 (C:\Program Files\nodejs\node.exe) npm : 8.19.4 OS : Windows 10 ### Additional Information _No response_

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[Shruti2906]

Here is the github link for reproduced code: https://github.com/Shruti2906/ionicPlaceHolderIssue

[averyjohnston]

Thank you, and apologies for the delay. This behavior matches that of a native <input>: https://codepen.io/Amanda-Johnston/pen/eYoOWod

In general, I would not recommend using the placeholder attribute as a substitute for a label, as this has accessibility problems. You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder#accessibility_concerns

Instead, I would try one of these two alternatives:

1. Use the label prop of IonInput instead of placeholder.
2. Use an IonDatetimeButton instead of an IonInput: https://ionicframework.com/docs/api/datetime-button

I'm going to close this as not a bug in Ionic, but let me know if you have any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.