flatpickr Flatpickr close on any click when on Bootstrap Modal

When the Flatpickr is called from a Bootstrap (v4) modal it closes on any kind of click on it (day selection, month selection, year dropdown, hours, minutes etc). Even if click on white space inside the Flatpickr. That makes very hard to select any correct time or day.

Reproduction Link

https://jsfiddle.net/uvmqpcvq/2/

Environment

flatpickr version used: 4.2.4
Browser name and version: Chrome 63
OS and version: macOS Sierra 10.12.6

Feb 05 '18 17:02 eduardochiaro

It looks to work fine when it is just a single date being selected and the link above also works fine for me. But if I choose to set the mode to range does it do as described. https://jsfiddle.net/uvmqpcvq/3/

Feb 08 '18 10:02 madsrode

Not really, on a single date is fine, but the issue is when you also have to select time. it closes before you can select it. The issue is always the same, it closes after the first click.

Feb 08 '18 16:02 eduardochiaro

I've got the same problem on Bootstrap v3.3.7.

Feb 08 '18 20:02 steve-kasica

I think it has something to do with the value of lostFocus in the documentClick function around line 1216. After clicking the calendar, lostFocus is True in my Bootstrap Modal code, but lostFocus is False in the DateTime example.

Update: isCalendarElement is False in my modal code and True in the example, which is causing lostFocus to be True in my modal code and False in the example.

Feb 08 '18 21:02 steve-kasica

This issue might be a duplicate of #1190.

Feb 08 '18 21:02 steve-kasica

Ugh.. I may just set the inline property to True to get around this.

Feb 08 '18 23:02 steve-kasica

I found a dirty fix that should solve it, at least for now. The problem that if you have more than one picker on the page you need to assign a different config object to each of them:

https://jsfiddle.net/uvmqpcvq/4/

A solution is adding a container around the input, with ID, and use appendTo config option.

appendTo: document.getElementById('picker-container')

This will move it side the modal end prevent the loss of the focus. However, the positioning is not correct, so a CSS fix is also required:

#picker-container .flatpickr-calendar {
  top: 60px !important;
  left: 0 !important;
}
#picker-container .flatpickr-calendar.arrowBottom {
  top: auto !important;
  bottom: 60px !important;
  left: 0 !important;
}

Feb 09 '18 00:02 eduardochiaro

Fixed in v4.3.0

Here's a fiddle using v4.2.4 - https://jsfiddle.net/wrsgns5h/ And v4.3.0 (fixed) https://jsfiddle.net/7d4fgwmq/1/

Feb 09 '18 00:02 chmln

Hey!

Despite the appreciated progress, I'm still having an when issue when selecting time.

Changing the month works just fine, but both in your jsfiddle (https://jsfiddle.net/7d4fgwmq/1/) and in my code, flatpickr still closes immediately after clicking any of the time options.

Feb 10 '18 14:02 isaacrector

@isaacrector Have you tried to set static: true, it solves my problem.

Feb 13 '18 03:02 madsrode

@isaacrector removing tabindex will also solve it.

Apr 01 '18 13:04 byteallen

@imxiaozhi It is the perfect solution. Thanks

Apr 13 '18 06:04 khamkim

@imxiaozhi thanks :)

Jun 16 '18 10:06 KalanaPerera

Still getting this on 4.5.2 with Bootstrap 4. I tried removing the tabindex after initialising the flatpickr controls, but the problem remains.

Sep 04 '18 20:09 cocowalla

static: true worked for me (perhaps incidentally on Bootstrap 3)

Sep 27 '18 16:09 saintsGrad15

I seem to be having this problem with static: true in 4.5.2, vanilla JS.

Oct 08 '18 01:10 ernsheong

Hey guys,

After some investigation, this looks like bad behavior on Bootstrap's part. flatpickr just does something like dayElement.focus() and hourElement.select() and bootstrap will fire some blur event - causing flatpickr to close.

Needless to say, fix incoming :)

Oct 16 '18 04:10 chmln

Removing tabindex doesn't fix the problem for me, using Bootstrap 4.

Using static: true does though.

Dec 05 '18 07:12 jadonbrownza

You can use static: true option for flatpickr.

Jan 23 '19 05:01 drop0118

Hello,

For the modal, static: true fix the problem for me with Bootstrap 4.2.1 and Flatpickr 4.5.2

Jan 28 '19 15:01 ghost

static: true fixed it for us also

Apr 22 '19 10:04 10029759

static: true just completely messes it up for me, making the picker invisible, save for a randomly placed vertical line. Has anyone found another workaround?

Jun 09 '19 19:06 cocowalla

@cocowalla setting focus to false when initializing bootstrap should fix the problem better for you. Please let me know if it worked

Jun 11 '19 09:06 viorelsfetea

@viorelsfetea do you mean there is a flatpickr config property called focus?

Jun 11 '19 10:06 cocowalla

No, in Bootstrap: https://getbootstrap.com/docs/4.3/components/modal/#options

Jun 11 '19 10:06 viorelsfetea

@viorelsfetea I can confirm that adding data-focus="false" to the modal actually works!

This has been an issue in our app for around a year, so many thanks for this! :grinning: :tada:

Jun 11 '19 10:06 cocowalla

@cocowalla no worries. Sorry we don't have a fix for it yet - it's rather complicated. If you'd like, you can read a little bit more in the tickets quoted here https://github.com/twbs/bootstrap/issues/19850, as this is an issue that affects lots of other libraries too

Jun 11 '19 11:06 viorelsfetea

The static: true solution will not work when using the rangePlugin inside a model, it will always open the picker under the first input..

Jan 10 '20 13:01 pascallieverse

@isaacrector removing tabindex will also solve it.

Thanks. Solved my problem.

Feb 28 '20 06:02 shamiul-anik

I can confirm that removing tabindex="-1" from the modal works for this using flatpickr v4.5.2 and bs 4.4.1

Apr 13 '20 08:04 FractalCamper