From d5fdbe3126a13c3a8062ecf8e72881396d47fbfc Mon Sep 17 00:00:00 2001
From: Shaurya Sharma <shaurya064@gmail.com>
Date: Thu, 9 Jan 2025 13:33:27 +0530
Subject: [PATCH] Fixes

---
 frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx    |  1 +
 .../RightSideBar/ComponentsManagerTab/constants.js    |  2 +-
 .../AppBuilder/Widgets/BaseComponents/BaseInput.jsx   | 11 ++++++-----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
index 427cced97b..181888ab5f 100644
--- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx
@@ -10,6 +10,7 @@ import ErrorBoundary from '@/_ui/ErrorBoundary';
 const shouldAddBoxShadowAndVisibility = [
   'Table',
   'TextInput',
+  'TextareaV2',
   'PasswordInput',
   'NumberInput',
   'Text',
diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js
index 2f25d9e7b7..19cfdb7032 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/constants.js
@@ -5,5 +5,5 @@ export const LEGACY_ITEMS = [
   'RadioButton',
   'Datepicker',
   'Modal',
-  'Textarea',
+  'TextArea',
 ];
diff --git a/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx b/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx
index f0a7d50cc6..74ce215737 100644
--- a/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx
+++ b/frontend/src/AppBuilder/Widgets/BaseComponents/BaseInput.jsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Label from '@/_ui/Label';
 import Loader from '@/ToolJetUI/Loader/Loader';
 import * as Icons from '@tabler/icons-react';
 const tinycolor = require('tinycolor2');
 
-const RenderInput = (props) => {
-  return props.inputType !== 'textarea' ? <input {...props} /> : <textarea {...props} />;
-};
+const RenderInput = forwardRef((props, ref) => {
+  return props.inputType !== 'textarea' ? <input {...props} ref={ref} /> : <textarea {...props} ref={ref} />;
+});
 
 export const BaseInput = ({
   height,
@@ -141,7 +141,7 @@ export const BaseInput = ({
           defaultAlignment === 'top' &&
           ((width != 0 && label?.length != 0) || (auto && width == 0 && label && label?.length != 0))
             ? 'flex-column'
-            : 'align-items-center'
+            : inputType != 'textarea' && 'align-items-center'
         } ${direction === 'right' && defaultAlignment === 'side' ? 'flex-row-reverse' : ''}
         ${direction === 'right' && defaultAlignment === 'top' ? 'text-right' : ''}
         ${visibility || 'invisible'}`}
@@ -163,6 +163,7 @@ export const BaseInput = ({
           isMandatory={isMandatory}
           _width={_width}
           labelWidth={labelWidth}
+          top={inputType === 'textarea' && defaultAlignment === 'side' && '9px'}
         />
 
         {showLeftIcon && (