[EuiSuperDatePicker] Crashes and throws Invalid time value for edge case values

[jloleysens]

Summary

Using the super time picker in Kibana can lead to UI crashing for edge case values (see elastic/kibana#91138).

How to reproduce

1. Navigate here https://eui.elastic.co/#/forms/super-date-picker#configurations
2. Select “days ago” and entering a value of 9 9s
3. See error

Is there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?

Gif

[hetanthakkar]

@cchaos Can we limit the characters the user type in the input field and set it to maybe 8 characters !? this might be the simplest fix?

[cchaos]

Unfortunately, no, that isn't a valid fix. The problem isn't that they've type 9+ characters, the problem is that the component crashes. The component needs to gracefully handle user input error and not completely crash the UI. If an error surfaces as a result of user input, then the text field just needs to display as invalid and give feedback to the user.

[hetanthakkar]

@cchaos Yeah i get it. I thought user would understand that if he can is allowed to enter just 8 digits that is the valid input!

[jloleysens]

Can we limit the characters the user type in the input field and set it to maybe 8 characters !? this might be the simplest fix?

This is just one combination of user inputs that can lead the component to crashing. The underlying problem is that an Invalid Date is being created by going too far back in time and then we call toISOString to render the "Start date". If I had selected "years" I would need to enter fewer 9s for the crash to occur.

...the problem is that the component crashes. The component needs to gracefully handle user input...

++ to this!

[cchaos]

Whoops, forgot to close this issue when #5263 merged. This has been fixed.