Using calendar to select date causes an error in the javascript console

[jordanjones243]

Describe the bug

When using the calendar to select a date and the input field is empty, we get an error in the javascript console of the developer tools.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/datepicker
2. Open the browser's javascript console
3. Click on the datepicker
4. Select a date
5. See error

There is a suspicion that this is coming from auro-input and features related to auto formatting.

Expected behavior

When a user adds a new date to a date picker, there is no error.

Recommended action

Look into how dates are being passed to input and see where the conflict is with input and cleave.js formatting the date. When there is an issue discovered be sure to create a NEW issue with auro-input documenting this issue and link back this issue.

Exit criteria

This issue will be considered closed once there is a demonstrated use case that does not throw the error.

Screenshots

[jordanjones243]

This bug is coming from an implementation error in CleaveJS. What's happening is that the getPostDelimiter method in CleaveJS is throwing an error because one of the method's parameters uses the last known value of auro-input. When we select a date using the calendar when the datepicker is in it's default state, auro-input.value = undefined, hence why this error is being thrown.

This error does not affect the functionality of the datepicker, but logs an error on something that is going on behind the scenes and what users will likely never see. This bug will be put on hold until we can talk about it during `finement and determine the best solution.

[blackfalcon]

What do you think about putting a console.warn statement in the code where this happens that references this issue? That way we don't lose track of this conversation and are reminded that we know why that error is there.

[jordanjones243]

What do you think about putting a console.warn statement in the code where this happens that references this issue? That way we don't lose track of this conversation and are reminded that we know why that error is there.

That is a good idea, will do.

[blackfalcon]

Unable to consistently reproduce this error. In a phone meeting, @blackfalcon was NOT able to repro, but @jordanjones243 IS able to repro.

There is a WARN in the code that references this issue. @jordanjones243 will take a stab to look into this a little more and report back findings.

[blackfalcon]

Maybe a link between these two issues, @jason-capsule42 will review.

• Unable to select date in calendar - eventListener on auro-input not firing auro-datepicker#93

[jason-capsule42]

I believe this issue is tied to when datepicker is setting the input to an empty string and auro-input is trying to parse that using CleaveJS into a valid date.

This isn't an issue with datepicker itself but rather with auro-input. We need to prevent our auto-formatting from trying to happen against empty strings.

Moving this ticket auro-input.