problem displaying the datepicker with option 'c' (centered).

[toitoibisbis]

With option 'c' (centered), after clicking the input field, the datepicker immediatly closes again.
This happens when the datepicker is placed over the input element it is connected with.
This is in Chrome: Version 122.0.6261.111 (Official Build) (64-bit). (It runs fine in Firefox).

The problem i think is at the function oneHandler at : picker.el===target.

function oneHandler(e) {
  ...
  var instance = datepickers.filter(function(picker) {
    return picker.calendar.contains(target) || picker.el === target

Because at this point the picker instance is "undefined".
And then the calendar is hidden because of if (!instance).

Except for this, i think it's a wonderful datepicker.
I have no idea how to solve this. Help greatly appreciated!

Greetings, Sebastian

[astvyakimenko]

Hi, I have the same issue. The problem occurs when the datepicker container appears over the input.
The datepicker is immediately closed if it appears over the input.
The probable reason is event handling. When you click on the input, the "focusin" event is triggered first, and the calendar appears. After the "focusin" event, a "click" event is triggered. I don't know why, but the "click" event has a different "event.target" than the "focusin" event. As a result, the datepicker instance is undefined, and the calendar logic closes all calendars if the "click" event's target does not match any instance.
(This part of the logic handles hiding the calendar when you click outside.)

  if (type === 'click') {
    // Anywhere other than the calendar - close the calendar.
    if (!instance) return datepickers.forEach(hideCal)

Calendar under input (regular behavior)

Calendar over input

You can check the event behavior in this example in any sandbox environment.

HTML

<div class="test">
  <input class="input js-in"/>
  <div class="square hide js-sq"></div>
</div>

CSS

.square {
  width: 100px;
  height: 100px;
  background: #e0e0e0;
  border: 1px solid #888;
  display: block;
  top: 8px;
  position: fixed;
}

.input {
  display: block;
  margin-bottom: 12px;
  padding: 8px;
  font-size: 16px;
  width: 200px;
  box-sizing: border-box;
}

.hide {
  display: none;
}

JS

var events = ['click', 'focusin']

events.forEach(function(event) {
    document.addEventListener(event, oneHandler)
});

function oneHandler (e) {
  var type = e.type
  var target = e.target
  var targetClass = target.className

  console.log(`type ${type}`);
  console.log(`targetClass '${targetClass}'`);

  var sq = document.getElementsByClassName('js-sq')[0];

  if (type === 'click') {
    if (targetClass.includes('js-in')) { // is you click on square
      
    } else if (!targetClass.includes('js-sq')) { // hide is you click everything except input
      sq.classList.add('hide')
    }
  } else if (type === 'focusin') {
    if (targetClass.includes('js-in')) { // show is you focusin on input
      sq.classList.remove('hide')
    }
  }
}

Best regards,
Vitalii