fix(ui) Socket Panel > resized resizable payload input resets height …

…every time you type in it or when a message comes in
flawiddsouza · Jan 20, 2025 · 4c21f24 · 4c21f24
1 parent 6995ad0
commit 4c21f24
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/ui/src/components/SocketPanel.vue b/packages/ui/src/components/SocketPanel.vue
@@ -112,7 +112,8 @@
                                 :allow-multiple-lines="true"
                                 lang="json"
                                 class="w-100p mt-0_5rem input o-a"
-                                style="height: 5.8rem; resize: vertical; margin-bottom: 0.2rem;"
+                                style="resize: vertical; margin-bottom: 0.2rem;"
+                                v-initial-height
                             />
                             <div class="d-f flex-jc-sb">
                                 <button
@@ -725,6 +726,14 @@ async function setSelectedTextAsEnvironmentVariable() {
     $toast.success(`Environment variable set: ${environmentVariableName}`)
 }
 
+const vInitialHeight = {
+    mounted(el: HTMLElement) {
+        if(!el.style.height) {
+            el.style.height = '5.8rem'
+        }
+    }
+}
+
 // Lifecycle Events
 
 onBeforeMount(async() => {
@@ -938,7 +947,6 @@ button.icon > svg {
     display: block;
 }
 
-textarea,
 input,
 select,
 .input {
@@ -950,10 +958,6 @@ select,
     background-color: var(--background-color);
 }
 
-textarea {
-    resize: vertical;
-}
-
 input:disabled, .input.disabled {
     background-color: var(--socket-input-disabled-background-color);
 }

diff --git a/packages/ui/src/components/Tab.vue b/packages/ui/src/components/Tab.vue
@@ -34,7 +34,9 @@
     </section>
 
     <section class="request-response-panels" v-if="collectionItem && collectionItem._type === 'socket'">
-        <SocketPanel :key="collectionItem._id" :active-tab="collectionItem" />
+        <KeepAlive>
+            <SocketPanel :key="collectionItem._id" :active-tab="collectionItem" />
+        </KeepAlive>
     </section>
 
     <section class="request-response-panels" v-show="collectionItem && collectionItem._type === 'request_group'">