UX Questions

[oyeanuj]

Hi @alanclarke, thank you for putting out this library - seems very useful.

As I began implementing, I noticed a few things which I wanted to bring up -

1. Support for placeholder: I feel like if you don't have a value to initialize with, showing a placeholder would be good user experience. The placeholder could be time or a string (like 'enter time').

2. Guides: This is especially useful when one begins to type, as it guides the user. So, lets say a user starts entering the number I am thinking of being able to show the separator and no text (or grayed out text). This, in conjunction with the a placeholder time makes for a good user experience as the placeholder doesn't disapper but just grays out acting as a guide.

3. When we enter the two digits for the hours, I feel like the cursor should move past the separator seeing how it moved to the next digit previously (when you enter the first hour digit).

4. I noticed that the input has type=text. I wonder if it would be more semantic to have it be type=time?

Thank you!

[alanclarke]

Heya @oyeanuj thanks for this great feedback:

1. Yeah agree, also think that this should be configurable option like in other standard inputs
2. I don't quite follow what you mean, could you point me to an example?
3. Good shout, we should do this
4. Unfortunately this is not possible for technical reasons - the type=time input is a thing and has a lot of incompatible behaviour which is also inconsistent across different browsers and devices (sometimes causes popup, sometimes dropdown, sometimes something similar to this component)

[oyeanuj]

@alanclarke thank you for the quick response!

For the (2), here are a couple of different examples:

• https://text-mask.github.io/text-mask/ (only shows the guide when you start typing in..)
• http://codepen.io/chriscoyier/pen/PbOEqL (keeps the placeholder as the guide, and replaces it as you type, often seen in credit card and phone number inputs)

And, finally, if I can add one more suggestion, it would be great to get the ref to the input incase one needs to drive focus, etc to the input.

Thank you!