Flatpickr: Flatpickr closes immediately when clicking somewhere && not adding input value with external elements.

Created on 10 Jan 2018 · 14Comments · Source: flatpickr/flatpickr

It doesn't matter where i click, flatpickr closes immediately. Also whenever i click on dates the value won't change in the input field. I already tried without external elements also but still nothing.

i should mention that i'm appending fp elements with ajax and after that i'm initalizing the function.

HTML

<div class="d-flex align-items-center flatpickr">\
<input data-input data-senddata="date1" type="text" name="dtn1" placeholder="Loosimise kellaaeg">\
<i data-toggle class="material-icons">date_range</i>\
</div>\

var fp = flatpickr(".flatpickr", { locale: 'et', dateFormat: 'Y.m.d H:i', enableTime: true });

Your Environment

flatpickr version used: Latest
Browser name and version: Chrome, version 63.0.3239.132
OS and version: Windows 8

Source

depz

Most helpful comment

Simply remove tabindex="-1" to fix the issue if you're using Bootstrap Modal.

tangien on 17 Dec 2018

👍3

All 14 comments

I'm also seeing this issue

trevcodesjs on 11 Jan 2018

@depz your config is missing wrap: true
See https://chmln.github.io/flatpickr/examples/#flatpickr-external-elements

chmln on 11 Jan 2018

❤1

I feel so stupid, wrap fixed the value issue but still when i click somewhere fp closes. I should also mention that i'm using material blue design. And i'm using fp inside a modal but z-index is not the issue i already checked it.

EDIT: tried different designs but still, same issue.

depz on 12 Jan 2018

@depz do you have to have a hidden email/password form on your page?

https://bugs.chromium.org/p/chromium/issues/detail?id=780834

For me this was the issue, bizarre bug where a input field on my hidden form was getting focused by chrome, causing the click events on the calendar to be triggered on the form instead of the calendar.

trevcodesjs on 12 Jan 2018

👍1

@ha1ogen nope, i have no hidden fields.

depz on 12 Jan 2018

To those who are still experiencing problems, if you could provide a repro on jsfiddle, I could take a shot at fixing the issue. Not much I can do otherwise

chmln on 22 Jan 2018

Also experiencing this issue. Has something to do with Bootstrap's modal basically taking over the <body> element while open. Tried multiple variations of appendTo configurations, but no luck so far. Will edit comment if I figure out a fix.

isaacrector on 22 Jan 2018

@isaacrector If nothing works, try the ignoredFocusElements: [] option and add the bootstrap body element there. A click on any of the elements (or their children) provided in the array won't close the calendar.

Then you can use something like https://chmln.github.io/flatpickr/plugins/#confirmdate to close the calendar instead.

chmln on 22 Jan 2018

@chmln Cool, thank you. I'll try that after lunch.

Not sure if this helps at all, but when I click an empty spot in fp's container, the click event's target is registering as body.modal-open, when I expect it to be div.flatpickr-current-month.

Also, just to be perfectly clear, clicking an option in fp still updates the input, but user has to reopen fp after every click.

Thanks again.

isaacrector on 22 Jan 2018

Hi
I have the same issue - fp in a bootstrap modal...
using ignoredFocusElements: [] does then allow the datepicker to be used without instantly closing - but no matter what element i put in there the datepicker then does not close at all

I looked at the confirmdate plugin but i'm unsure how to implement it - and the demo on the link provided does not seem to have any confirm button showing anyway...?

fepixie on 29 Jan 2018

also having an issue in bootstrap modal - will not keep the date I've picked and will automatically clear to placeholder when clicked anywhere.

danielleplatt95 on 4 Oct 2018

@danielleplatt95 try using the static: true option

chmln on 4 Oct 2018

👍3

Simply remove tabindex="-1" to fix the issue if you're using Bootstrap Modal.

tangien on 17 Dec 2018

👍3

1496 var lostFocus = e.type === "blur"
1497 ? isInput &&
1498 e.relatedTarget &&
1499 !isCalendarElem(e.relatedTarget)
1500 : !isInput &&
1501 !isCalendarElement &&
1502 !isCalendarElem(e.relatedTarget);

when i got error, isInput was retuen -1 in line number 1500

if edit line number 1500 as this
(!isInput || isInput < 0) &&
close event do work well