🐛 Fix layout problem for editable selects

CHANGES.md

@@ -65,6 +65,7 @@
 - Fix SVG not showing properties at code [Taiga #1437](https://tree.taiga.io/project/penpot/issue/1437)
 - Fix shadows when exporting groups [Taiga #1495](https://tree.taiga.io/project/penpot/issue/1495)
 - Fix drag-select when renaming layer text [Taiga #1307](https://tree.taiga.io/project/penpot/issue/1307)
+- Fix layout problem for editable selects [Taiga #1488](https://tree.taiga.io/project/penpot/issue/1488)
 
 
 ### :arrow_up: Deps updates

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -420,6 +420,10 @@
       position: absolute;
       right: 0;
       padding-right: 4px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
     }
 
     &.input-option {
@@ -438,6 +442,11 @@
       }
     }
 
+    .custom-select-dropdown {
+      top: unset;
+      margin-bottom: 0;
+    }
+
     &:hover {
       border: 1px solid $color-gray-40;
     }
@@ -449,10 +458,10 @@
     height: 2rem;
   }
   .editable-select svg {
-      fill: $color-gray-40;
+    fill: $color-gray-40;
   }
   .dropdown-button {
-      top: 4px;
+    top: 4px;
   }
   .editable-select.input-option .input-text {
     padding: 0;
@@ -778,8 +787,8 @@
     margin-left: 0.5rem;
 
     & .custom-select-dropdown {
-      width: 56px;
-      min-width: 56px;
+      width: 5rem;
+      min-width: 5rem;
       max-height: 10rem;
     }
   }
@@ -1004,7 +1013,6 @@
     cursor: pointer;
     max-height: 16rem;
     min-width: 6rem;
-    margin-top: 25px;
     left: initial;
     top: 0;
 }

frontend/src/app/main/ui/components/editable_select.cljs

@@ -13,16 +13,19 @@
    [app.common.uuid :as uuid]
    [app.common.data :as d]
    [app.util.dom :as dom]
+   [app.util.timers :as timers]
    [app.main.ui.icons :as i]
    [app.main.ui.components.dropdown :refer [dropdown]]))
 
 (mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
   (let [state (mf/use-state {:id (uuid/next)
                              :is-open? false
-                             :current-value value})
+                             :current-value value
+                             :top nil
+                             :left nil
+                             :bottom nil})
         open-dropdown #(swap! state assoc :is-open? true)
         close-dropdown #(swap! state assoc :is-open? false)
-
         select-item (fn [value]
                       (fn [event]
                         (swap! state assoc :current-value value)
@@ -38,7 +41,23 @@
                               (let [value (-> event dom/get-target dom/get-value)
                                     value (or (d/parse-integer value) value)]
                                 (swap! state assoc :current-value value)
-                                (when on-change (on-change value))))]
+                                (when on-change (on-change value))))
+
+        on-node-load
+        (fn [node]
+          ;; There is a problem when changing the state in this callback that
+          ;; produces the dropdown to close in the same event
+          (timers/schedule
+           #(when-let [bounds (when node (dom/get-bounding-rect node))]
+              (let [{window-height :height} (dom/get-window-size)
+                    {:keys [left top height]} bounds
+                    bottom (when (< (- window-height top) 300) (- window-height top))
+                    top (when (>= (- window-height top) 300) (+ top height))]
+                (swap! state
+                       assoc
+                       :left left
+                       :top top
+                       :bottom bottom)))))]
 
     (mf/use-effect
      (mf/deps value)
@@ -49,7 +68,8 @@
      #(reset! state {:is-open? false
                      :current-value value}))
 
-    [:div.editable-select {:class class}
+    [:div.editable-select {:class class
+                           :ref on-node-load}
      [:input.input-text {:value (or (-> @state :current-value value->label) "")
                          :on-change handle-change-input
                          :placeholder placeholder
@@ -58,7 +78,10 @@
 
      [:& dropdown {:show (get @state :is-open? false)
                    :on-close close-dropdown}
-      [:ul.custom-select-dropdown
+      [:ul.custom-select-dropdown {:style {:position "fixed"
+                                           :top (:top @state)
+                                           :left (:left @state)
+                                           :bottom (:bottom @state)}}
        (for [[index item] (map-indexed vector options)]
          (cond
            (= :separator item) [:hr {:key (str (:id @state) "-" index)}]