From 96eb7a4c45b87e88c826425531d5430c60a92a7d Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin@tooljet.io>
Date: Tue, 21 Dec 2021 20:28:18 +0530
Subject: [PATCH] Display validation error outside dropdown component (#1618)

---
 frontend/src/Editor/Components/DropDown.jsx | 42 +++++++++++----------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index 7a57f0c3aa..ece706326b 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -42,27 +42,29 @@ export const DropDown = function DropDown({ height, validate, properties, styles
   }, [JSON.stringify(values)]);
 
   return (
-    <div className="dropdown-widget row g-0" style={{ height, display: visibility ? '' : 'none' }}>
-      <div className="col-auto my-auto">
-        <label style={{ marginRight: label !== '' ? '1rem' : '0.001rem' }} className="form-label py-1">
-          {label}
-        </label>
-      </div>
-      <div className="col px-0 h-100">
-        <SelectSearch
-          disabled={disabledState}
-          options={selectOptions}
-          value={currentValue}
-          search={true}
-          onChange={(newVal) => {
-            setCurrentValue(newVal);
-            setExposedVariable('value', newVal).then(() => fireEvent('onSelect'));
-          }}
-          filterOptions={fuzzySearch}
-          placeholder="Select.."
-        />
+    <>
+      <div className="dropdown-widget row g-0" style={{ height, display: visibility ? '' : 'none' }}>
+        <div className="col-auto my-auto">
+          <label style={{ marginRight: label !== '' ? '1rem' : '0.001rem' }} className="form-label py-1">
+            {label}
+          </label>
+        </div>
+        <div className="col px-0 h-100">
+          <SelectSearch
+            disabled={disabledState}
+            options={selectOptions}
+            value={currentValue}
+            search={true}
+            onChange={(newVal) => {
+              setCurrentValue(newVal);
+              setExposedVariable('value', newVal).then(() => fireEvent('onSelect'));
+            }}
+            filterOptions={fuzzySearch}
+            placeholder="Select.."
+          />
+        </div>
       </div>
       <div className={`invalid-feedback ${isValid ? '' : 'd-flex'}`}>{validationError}</div>
-    </div>
+    </>
   );
 };