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

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 🙂