From 56fbc1489396a73cc027550d0dec0b1bdbda8acc Mon Sep 17 00:00:00 2001
From: antelle <dmitryvit@gmail.com>
Date: Sun, 8 Sep 2019 11:32:31 +0200
Subject: [PATCH] picker

---
 app/scripts/views/fields/field-view-autocomplete.js |  3 ++-
 app/scripts/views/fields/field-view-date.js         | 13 +++++++++++++
 app/scripts/views/fields/field-view-tags.js         |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/scripts/views/fields/field-view-autocomplete.js b/app/scripts/views/fields/field-view-autocomplete.js
index 8c7caf34..8902a91f 100644
--- a/app/scripts/views/fields/field-view-autocomplete.js
+++ b/app/scripts/views/fields/field-view-autocomplete.js
@@ -14,9 +14,10 @@ const FieldViewAutocomplete = FieldViewText.extend({
     startEdit() {
         FieldViewText.prototype.startEdit.call(this);
         const fieldRect = this.input[0].getBoundingClientRect();
+        const shadowSpread = parseInt(this.input.css('--focus-shadow-spread'));
         this.autocomplete = $('<div class="details__field-autocomplete"></div>').appendTo('body');
         this.autocomplete.css({
-            top: fieldRect.bottom,
+            top: fieldRect.bottom + shadowSpread,
             left: fieldRect.left,
             width: fieldRect.width - 2
         });
diff --git a/app/scripts/views/fields/field-view-date.js b/app/scripts/views/fields/field-view-date.js
index 1c992e69..a115a9c0 100644
--- a/app/scripts/views/fields/field-view-date.js
+++ b/app/scripts/views/fields/field-view-date.js
@@ -33,9 +33,22 @@ const FieldViewDate = FieldViewText.extend({
                 weekdaysShort: Locale.weekdaysShort
             }
         });
+        this.picker.adjustPosition = this.adjustPickerPosition.bind(this);
         _.defer(this.picker.show.bind(this.picker));
     },
 
+    adjustPickerPosition(...args) {
+        window.Pikaday = Pikaday;
+        Pikaday.prototype.adjustPosition.apply(this.picker, args);
+        const shadowSpread = parseInt(this.input.css('--focus-shadow-spread'));
+        if (shadowSpread) {
+            const isOnTop = this.picker.el.classList.contains('top-aligned');
+            const offset = isOnTop ? -shadowSpread : shadowSpread;
+            const newTop = parseInt(this.picker.el.style.top) + offset;
+            this.picker.el.style.top = `${newTop}px`;
+        }
+    },
+
     fieldValueBlur(e) {
         if (!this.picker) {
             FieldViewText.prototype.fieldValueBlur.call(this, e);
diff --git a/app/scripts/views/fields/field-view-tags.js b/app/scripts/views/fields/field-view-tags.js
index 37b6c809..33202288 100644
--- a/app/scripts/views/fields/field-view-tags.js
+++ b/app/scripts/views/fields/field-view-tags.js
@@ -38,11 +38,12 @@ const FieldViewTags = FieldViewText.extend({
     startEdit() {
         FieldViewText.prototype.startEdit.call(this);
         const fieldRect = this.input[0].getBoundingClientRect();
+        const shadowSpread = parseInt(this.input.css('--focus-shadow-spread'));
         this.tagsAutocomplete = $('<div class="details__field-autocomplete"></div>').appendTo(
             'body'
         );
         this.tagsAutocomplete.css({
-            top: fieldRect.bottom,
+            top: fieldRect.bottom + shadowSpread,
             left: fieldRect.left,
             width: fieldRect.width - 2
         });