fix(date-picke): close range datepicker after clicking elsewhere on page

[rezak-otmani]

Overview

Resolves #772

Close the date picker icon when this component loses focus

Added

Removed

Changed

Testing / Reviewing

[asudoh]

Thanks @rezak-otmani for trying to address the problem. Could you try clicking on start date and then clicking on end date, and ensure that the date picker is still shown? The code you tried to remove has a reason being there as the comment says, and want to ensure that the purpose of the code won't be broken. Thanks!

[rezak-otmani]

Hi @asudoh, I don't know exactly if there is a side effect of the code I deleted,, but when we click on the start date, and then on the end date the date picker is always displayed, and it works

[alisonjoseph]

LGTM! 👍

@asudoh I double checked the config in flatpicker and its related to having it always open, which I don't believe is the intended behavior. So this fix should be ok. https://flatpickr.js.org/examples/#inline-calendar

[asudoh]

Thanks @rezak-otmani and @alisonjoseph for diving into this topic! Here’s what I see with @rezak-otmani’s change:

And here’s what I expect:

@alisonjoseph is right that the usage of that option is not something Flatpickr intended, but the code was to prevent date picker from being closed in the scenario I brought up. Flatpickr has the code to close the dropdown in that scenario, and cannot be disabled unless we temporarily set inline option.

Hope it makes sense to everybody. Please don’t hesitate to bring up if there are any questions. Thanks!

[alisonjoseph]

I see what @asudoh is saying. So while this solves the issue of being able to click outside the dropdown after clicking on the calendar icon to close it, it creates a new issue where you can't click between input boxes without closing the dropdown prematurely.

[marijohannessen]

It's working for me! 👍 ✅

[marijohannessen]

@alisonjoseph can you review again and see if you're still seeing the issue?

[alisonjoseph]

LGTM now! ✅

[carbon-bot]

🎉 This PR is included in version 9.0.9 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀