Problem with choice of month and year on Safari browser on iPhone 12

[codeAKA]

In our project in React (version 17.0.2) we had a problem with choice of month and year on Safari browser on iPhone 12. When month or year was picked calendar was closed without getting of date value. We solved that by overriding Pikaday.prototype.show method - adding event listeners to all '.pika-select' elements in component which use Pikaday calendar:

Pikaday.prototype.show = function () {

   if (!this.isVisible()) {

     this._v = true;

     this.draw();

     removeClass(this.el, 'is-hidden');

     if (this._o.bound) {

         addEvent(document, 'click', this._onClick);

         this.adjustPosition();

     }

     if (typeof this._o.onOpen === 'function') {

         this._o.onOpen.call(this);

     }

     const pikaSelects = this.el.querySelectorAll('.pika-select');

     if (pikaSelects.length > 0) {

         pikaSelects.forEach((el) => addEvent(el, 'click', this._onMouseDown, true))

         pikaSelects.forEach((el) => addEvent(el, 'mousedown', this._onMouseDown, true))

         pikaSelects.forEach((el) => addEvent(el, 'touched', this._onMouseDown, true))

     }

 }
}

We also added other methods from Pikaday used inside Pikaday.prototype.show in component which use them:

// methods of Pikaday

const hasEventListeners = !!window.addEventListener;


const addEvent = function (el, e, callback, capture) {

  if (hasEventListeners) {

    el.addEventListener(e, callback, !!capture);

  } else {

    el.attachEvent('on' + e, callback);

  }

};


const removeClass = function (el, cn) {

  el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));

};