The Wayback Machine - https://web.archive.org/web/20201203192143/https://github.com/palantir/blueprint/issues/3434
Skip to content

/ blueprint

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use `type="number | tel"` for <TimePicker /> inputs in order for users to see numeric keyboard on mobile devices #3434

Open
yuyokk opened this issue Mar 20, 2019 · 3 comments
Open

Use `type="number | tel"` for <TimePicker /> inputs in order for users to see numeric keyboard on mobile devices #3434

yuyokk opened this issue Mar 20, 2019 · 3 comments
Labels
P3 Package: datetime Type: enhancement good first issue help wanted

Comments

@yuyokk
Copy link

@yuyokk yuyokk commented Mar 20, 2019

Hi folks,

Right now <TimePicker /> component renders the following inputs

e.g.

<input class="bp3-timepicker-input bp3-timepicker-hour" value="8">

so users see the following keyboard on mobile devices

timepicker

And to type time they need to do extra clicks on their keyboard (to switch to numeric).

I was wondering if it is possible to change input type to either number or tel in order for mobile users to see numeric keyboard by default.

Please let me know if this request makes sense.
Thank you 🙏
@yuyokk yuyokk changed the title Use `type="number | tel"` for <TimePicker /> inputs in order for users to see numeric keyboard on mobiles Use `type="number | tel"` for <TimePicker /> inputs in order for users to see numeric keyboard on mobile devices Mar 21, 2019
@yuyokk
Copy link
Author

@yuyokk yuyokk commented Mar 22, 2019 •
edited

Team, I want to work on this one. Just wanted to clarify the solution before starting the work.

Will adding type="tel" to input here be a good enough solution? Or you have any other views on this?

Please let me know.
@adidahiya
Copy link
Member

@adidahiya adidahiya commented Mar 22, 2019

This isn't a telephone number, so you should use type="number". But you need to make sure this doesn't interfere with desktop usage, since Blueprint is a desktop-focused UI toolkit.
@connorlurring
Copy link

@connorlurring connorlurring commented Jul 21, 2019

I saw this was tagged as a good first issue, so I took a look at this today.

The noticeable difference between the current implementation and using type-"number" are the input spinners that the number field provides. These spinners can be disabled using CSS through webkit/moz however.

An alternative that could be used for this field is the HTML5 type="time" option, which would degrade into type="text" where not supported.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
P3 Package: datetime Type: enhancement good first issue help wanted
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
@adidahiya @yuyokk @connorlurring
You can’t perform that action at this time.