From f98630a46bfe98b8cfe65c30f6b96cb8f4662791 Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Thu, 2 Feb 2023 09:36:35 +0100
Subject: [PATCH] :bug: Fix invitations input on team management and onboarding
 modal

---
 CHANGES.md                                    |  2 +-
 .../styles/main/partials/dashboard-team.scss  | 30 +++++++++++-
 .../resources/styles/main/partials/modal.scss | 46 ++++++++++++++++++-
 .../src/app/main/ui/components/forms.cljs     | 30 +++++++-----
 4 files changed, 94 insertions(+), 14 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 66e155fe31..0d9a4406b0 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -7,7 +7,7 @@
 - Fix typing CMD+Z on MacOS turns the cursor into a Zoom cursor [Taiga #4778](https://tree.taiga.io/project/penpot/issue/4778)
 - Fix white space on small screens [Taiga #4774](https://tree.taiga.io/project/penpot/issue/4774)
 - Fix button spacing on delete acount modal [Taiga #4762](https://tree.taiga.io/project/penpot/issue/4762)
-
+- Fix invitations input on team management and onboarding modal [Taiga #4760](https://tree.taiga.io/project/penpot/issue/4760)
 
 ## 1.17.0
 
diff --git a/frontend/resources/styles/main/partials/dashboard-team.scss b/frontend/resources/styles/main/partials/dashboard-team.scss
index ed87335834..edc8d4f5a6 100644
--- a/frontend/resources/styles/main/partials/dashboard-team.scss
+++ b/frontend/resources/styles/main/partials/dashboard-team.scss
@@ -29,7 +29,35 @@
 
   .custom-input {
     width: 100%;
-    height: 115px;
+    min-height: 116px;
+    max-height: 176px;
+    overflow-y: hidden;
+    input {
+      &.no-padding {
+        padding-top: 12px;
+      }
+      min-height: 40px;
+    }
+    .selected-items {
+      gap: 8px;
+      padding: 8px;
+      max-height: 132px;
+      overflow-y: scroll;
+      .selected-item {
+        .around {
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          width: fit-content;
+          .icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
   }
 
   .custom-select {
diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss
index be9028377a..580ffe0f61 100644
--- a/frontend/resources/styles/main/partials/modal.scss
+++ b/frontend/resources/styles/main/partials/modal.scss
@@ -1542,8 +1542,52 @@
 
 .onboarding-team-members {
   .team-left {
+    padding: 42px 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: auto;
     form {
-      margin-top: 32px;
+      margin-top: 5px;
+      .invite-row {
+        .custom-input {
+          width: 100%;
+          min-height: 80px;
+          height: fit-content;
+          max-height: 176px;
+          overflow-y: hidden;
+          input {
+            &.no-padding {
+              padding-top: 12px;
+            }
+            min-height: 40px;
+          }
+          .selected-items {
+            gap: 7px;
+            padding: 7px;
+            max-height: 132px;
+            overflow-y: scroll;
+            .selected-item {
+              .around {
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                width: fit-content;
+                .icon {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                }
+              }
+            }
+          }
+        }
+      }
+      .buttons {
+        margin-top: 12px;
+      }
     }
   }
 }
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index f25358719e..fab3f476cd 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -130,7 +130,7 @@
       (cond
         (and touched? (:message error))
         [:span.error {:id (dm/str "error-" input-name)
-                      :data-test (clojure.string/join [data-test "-error"]) }(tr (:message error))]
+                      :data-test (clojure.string/join [data-test "-error"])} (tr (:message error))]
 
         (string? hint)
         [:span.hint hint])]]))
@@ -328,7 +328,13 @@
         remove-item!
         (mf/use-fn
          (fn [item]
-           (swap! items #(into [] (remove (fn [x] (= x item))) %))))]
+           (swap! items #(into [] (remove (fn [x] (= x item))) %))))
+
+        manage-key-down
+        (mf/use-fn
+         (fn [item event]
+           (when (kbd/enter? event)
+             (remove-item! item))))]
 
     (mf/with-effect [result @value]
       (let [val (cond-> @value trim str/trim)
@@ -337,14 +343,6 @@
         (update-form! values)))
 
     [:div {:class klass}
-     (when-let [items (seq @items)]
-       [:div.selected-items
-        (for [item items]
-          [:div.selected-item {:key (:text item)}
-           [:span.around {:class (when-not (:valid item) "invalid")}
-            [:span.text (:text item)]
-            [:span.icon {:on-click #(remove-item! item)} i/cross]]])])
-
      [:input {:id (name input-name)
               :class in-klass
               :type "text"
@@ -355,4 +353,14 @@
               :value @value
               :on-change on-change
               :placeholder (when empty? label)}]
-     [:label {:for (name input-name)} label]]))
+     [:label {:for (name input-name)} label]
+
+     (when-let [items (seq @items)]
+       [:div.selected-items
+        (for [item items]
+          [:div.selected-item {:key (:text item)
+                               :tab-index "0"
+                               :on-key-down (partial manage-key-down item)}
+           [:span.around {:class (when-not (:valid item) "invalid")}
+            [:span.text (:text item)]
+            [:span.icon {:on-click #(remove-item! item)} i/cross]]])])]))