From 71b0736d0ddbd599ab41cde0a6b0823e2bb7da2f Mon Sep 17 00:00:00 2001
From: Giulio Ganci <giulioganci@gmail.com>
Date: Fri, 13 May 2022 18:20:47 +0200
Subject: [PATCH] fix(UI): BaseSelect style

---
 src/renderer/components/BaseSelect.vue | 34 ++++++++++++++++++--------
 src/renderer/scss/main.scss            |  2 +-
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/BaseSelect.vue b/src/renderer/components/BaseSelect.vue
index d26de2eb..cb3867ff 100644
--- a/src/renderer/components/BaseSelect.vue
+++ b/src/renderer/components/BaseSelect.vue
@@ -2,7 +2,7 @@
    <div
       ref="el"
       class="select"
-      :class="{'select-open': isOpen, 'select--disabled': disabled}"
+      :class="{'select--open': isOpen, 'select--disabled': disabled}"
       role="combobox"
       :tabindex="searchable || disabled ? -1 : tabindex"
       @focus="activate()"
@@ -34,7 +34,6 @@
       </div>
       <Teleport
          v-if="isOpen"
-         ref="teleportEl"
          :to="dropdownContainer"
       >
          <div
@@ -76,10 +75,10 @@ export default defineComponent({
    name: 'BaseSelect',
    props: {
       modelValue: {
-         type: [String, Number, Object]
+         type: [String, Number, Object, Boolean]
       },
       value: {
-         type: [String, Number, Object]
+         type: [String, Number, Object, Boolean]
       },
       searchable: {
          type: Boolean,
@@ -276,13 +275,22 @@ export default defineComponent({
       };
 
       const adjustListPosition = () => {
-         const element = el.value;
-         const { left, top } = element.getBoundingClientRect();
-         const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
+         setTimeout(() => {
+            const element = el.value;
+            let { left, top } = element.getBoundingClientRect();
+            const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
+            top = top + element.clientHeight + offsetTop;
+            const openBottom = top >= 0 && top + optionList.value.clientHeight <= window.innerHeight;
 
-         optionList.value.style.left = `${left + offsetLeft}px`;
-         optionList.value.style.top = `${top + element.clientHeight + offsetTop}px`;
-         optionList.value.style.minWidth = `${element.clientWidth}px`;
+            if (!openBottom) {
+               top -= (offsetTop * 2 + element.clientHeight);
+               optionList.value.style.transform = 'translate(0, -100%)';
+            }
+
+            optionList.value.style.left = `${left + offsetLeft}px`;
+            optionList.value.style.top = `${top}px`;
+            optionList.value.style.minWidth = `${element.clientWidth}px`;
+         }, 100);
       };
 
       const keyArrows = (direction) => {
@@ -351,12 +359,18 @@ export default defineComponent({
 .select {
    display: block;
 
+   &:focus, &--open {
+      z-index: 10;
+   }
+
    &__search-input {
       appearance: none;
       border: none;
       background: transparent;
       outline: none;
       color: currentColor;
+      max-width: 100%;
+      width: 100%;
    }
 
    &__list-wrapper {
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 76ec038c..6aab9fdf 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -298,7 +298,7 @@ option:checked {
   }
 
   &.select {
-    &.select-open {
+    &.select--open {
       border-color: $primary-color !important;
       @include control-shadow();
     }