diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
index ce4c41904..4cf324778 100644
--- a/frontend/webapp/hooks/destinations/useDestinationFormData.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -87,6 +87,7 @@ export function useDestinationFormData(params?: { destinationType?: string; supp
   }, [supportedSignals]);
 
   function handleFormChange(key: keyof typeof INITIAL | string, val: any) {
+    // this is for a case where "exportedSignals" have been changed, it's an object so they children are targeted as: "exportedSignals.logs"
     const [parentKey, childKey] = key.split('.');
 
     if (!!childKey) {
diff --git a/frontend/webapp/reuseable-components/textarea/index.tsx b/frontend/webapp/reuseable-components/textarea/index.tsx
index a69131c97..d63208bc9 100644
--- a/frontend/webapp/reuseable-components/textarea/index.tsx
+++ b/frontend/webapp/reuseable-components/textarea/index.tsx
@@ -61,7 +61,7 @@ const StyledTextArea = styled.textarea`
   background: none;
   color: ${({ theme }) => theme.colors.text};
   font-size: 14px;
-  padding: 12px 20px;
+  padding: 12px 20px 0;
   font-family: ${({ theme }) => theme.font_family.primary};
   font-weight: 300;
   line-height: 22px;
@@ -96,6 +96,14 @@ const ErrorMessage = styled(Text)`
 const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, required, onChange, ...props }) => {
   const ref = useRef<HTMLTextAreaElement>(null);
 
+  const resize = () => {
+    // this is to auto-resize the textarea according to the number of rows typed
+    if (ref.current) {
+      ref.current.style.height = 'auto';
+      ref.current.style.height = `${ref.current.scrollHeight}px`;
+    }
+  };
+
   return (
     <Container>
       <FieldLabel title={title} required={required} tooltip={tooltip} />
@@ -103,13 +111,10 @@ const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, requi
       <InputWrapper $disabled={props.disabled} $hasError={!!errorMessage} $isActive={!!props.autoFocus}>
         <StyledTextArea
           ref={ref}
+          onFocus={resize}
+          onBlur={resize}
           onChange={(e) => {
-            if (ref.current) {
-              // The following auto-resizes the textarea to the number of rows typed
-              ref.current.style.height = 'auto';
-              ref.current.style.height = `${ref.current.scrollHeight}px`;
-            }
-
+            resize();
             onChange?.(e);
           }}
           {...props}