[Input Date Picker]/[Input Time Picker] - Values should revert when an invalid date/time is entered.

[richiecarmichael]

Check existing issues

• I have checked for existing issues to avoid duplicates

Similar Issues

#8595 - calciteInputDatePickerChange only fires on "valid date change" - there is no way to detect field entr
#10169 - Programmatically clearing Input Date Picker value when user input invalid does not work

Actual Behavior

When a user enters an invalid date or time into the input-date-picker/input-time-picker and presses ENTER the value is not cleared. When the component loses focus, the calciteInputDatePickerChange event if fired with an empty string.

Expected Behavior

Invalid dates or time should be cleared (or revert to previous value) when ENTER is pressed.
When the component loses focus with nonsense text, the component should NOT throw a calciteInputDatePickerChange event with an empty string.

Reproduction Sample

https://codepen.io/richiecarmichael/pen/rNXZpyy?editors=1000

Reproduction Steps

1. Open this app.
2. Open console window of developer tools
3. Click on the time component input
4. Use the popup to pick a valid time (e.g. 1:00 AM)
5. Observe that valid time string (e.g. "01:00") is written to the console.
6. Click on the date component input again,
7. Enter "banana"
8. Click outside the input to blur the input-time-picker component
9. Observe that "banana" is not cleared from the UI.
10. Observe that an empty string is written to the console.

Reproduction Version

2.13.2

Relevant Info

No response

Regression?

No

Priority impact

impact - p3 - not time sensitive

Impact

Impacts Directions widget/component in JSSDK 4.32.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

// @bsvensson @NoashX

[DitwanP]

Closing because we're not pursuing this behavior for components, we want to avoid changing user-entered values as much as possible. The valueAsDate prop from issue #8578 will resolve the empty value portion of this issue and clearing the value when invalid will be up to the developers.

A quick example of how one might go about clearing resetting the input upon determining that the value is bad. If the input is in a form you could also set it's validity property as "invalid" and a custom validationMessage to let the user know.
https://codepen.io/Ditwan-Price/pen/JjgaLLR?editors=1011