palantir/blueprint

[DateTime] TimePicker cannot differentiate between empty (null/undefined) and midnight

Open

#4,815 opened on Jul 21, 2021

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Type: feature requesthelp wanted

Description

Environment

  • Package version(s): @blueprintjs/core: 3.47.0, @blueprintjs/datetime: 3.23.6
  • Operating System: Windows 10
  • Browser name and version: Chrome 91.0.4472.164 (Official Build) (64-bit)

Code Sandbox

Link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/blueprint-sandbox-forked-bthwn?file=/src/TimePickerExample.tsx

Steps to reproduce

  1. Create a TimePicker with undefined or null as its initial value
  2. Create a TimePicker with new Date("00:00") as its initial value
  3. The two TimePickers have different values, but there's no way to differentiate between them. One may be an optional field, therefore, is empty, while the other has a valid midnight value. However, both look the same to a final user
  4. Change the value of the first TimePicker manually (the one initialized with null or undefined)
  5. Now there's no way to remove the value and revert back to its initial null or undefined value (clear the input)

Actual behavior

There's no way to differentiate between an empty TimePicker and one with a midnight value. Also, it's not possible to clear the input to get an empty state (null/undefined value)

Expected behavior

There should be a visual difference between an empty TimePicker and one with a midnight value. We want to be able to show users that a field is optional and that is empty. Showing the same value as midnight is confusing and users may assume they are providing a value to an optional field.

Also, it should be possible to clear the inputs so users can remove the value if they decide they don't want to provide a value to an optional field.

Possible solution

A possible solution for this could be to show empty inputs or a hyphen (-) if the value is null or undefined.

Clearing the value could be more challenging since the component consists of 1-3 inputs. So an option could be to clear all the inputs if 1) any input is cleared and 2) the focus is lost in all the present inputs in the TimePicker component. An alternative would be to add a "clear button" somewhere near the inputs, but that doesn't sound very intuitive to me (and maybe a bit cumbersome too 🤔)

Thanks in advance for checking this issue and for the great work with this library 🙂

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
ReactTypeScriptTimePicker component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate the TimePicker component in @blueprintjs/datetime to understand how it handles null/undefined values vs Date(0). Look at the onChange behavior and how the component displays the time value. Consider implementing a visual distinction like showing empty input fields or a placeholder when value is null/undefined. Also, add a mechanism to clear the value, such as detecting empty inputs on blur and setting value to null. Review any existing discussion in the issue comments for alternative solutions.