Date picker (Range) on Vue and React does not behave as expected.

[lee-chase]

What package(s) are you using?

• @carbon/vue
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

NOTE: This is a flatpickr range plugin issue.
flatpickr/flatpickr#1575

Copied from carbon-design-system/carbon-components-vue#434
We found the following very confusing behavior in the date range picker:
1.) Click the startDate and select a range 1.6. to 3.6.
2.) Calendar closes. Click the startDate again and click 4.6.
Expected: new range 1.6. to 4.6.
Actual: 3.6. to 4.6.
3.) Repeat the test by clicking 5.6. Now the new range is 3.6. to 5.6. (as expected!)
4.) Then open startDate again and select 2.6.
Expected: 2.6. to 5.6.
Actual: 2.6. to 3.6.

This inconsistent behavior is really very confusing for the user!

Date Picker in range mode

Chrome 74

10.3.0 carbon-components-react
2.4.0 @carbon/vue

Steps to reproduce the issue

See description above

NOTE: Issue can also be observed here on flatpickr range plugin
https://flatpickr.js.org/plugins/#rangeplugin-beta

[asudoh]

Let's merge this discussion to #5572. Thanks @lee-chase for reporting!