From 0c29f1a9f433242a86e314b2e6ee170b362ca2ac Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin94@gmail.com>
Date: Fri, 8 Apr 2022 16:07:07 +0530
Subject: [PATCH] Fire onSelect when multiselect items are selected (#2771)

---
 frontend/src/Editor/Components/Multiselect.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Editor/Components/Multiselect.jsx b/frontend/src/Editor/Components/Multiselect.jsx
index 1603a3e616..9d4cfa7917 100644
--- a/frontend/src/Editor/Components/Multiselect.jsx
+++ b/frontend/src/Editor/Components/Multiselect.jsx
@@ -19,6 +19,7 @@ export const Multiselect = function Multiselect({
   setExposedVariable,
   onComponentClick,
   darkMode,
+  fireEvent,
 }) {
   const { label, value, values, display_values, showAllOption } = properties;
   const { borderRadius, visibility, disabledState } = styles;
@@ -62,13 +63,13 @@ export const Multiselect = function Multiselect({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
+  const onChangeHandler = (items) => {
+    setSelected(items);
     setExposedVariable(
       'values',
-      selected.map((option) => option.value)
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selected]);
+      items.map((item) => item.value)
+    ).then(() => fireEvent('onSelect'));
+  };
 
   return (
     <div
@@ -88,7 +89,7 @@ export const Multiselect = function Multiselect({
           hasSelectAll={showAllOption ?? false}
           options={selectOptions}
           value={selected}
-          onChange={setSelected}
+          onChange={onChangeHandler}
           labelledBy={'Select'}
           disabled={disabledState}
           className={`multiselect-box${darkMode ? ' dark' : ''}`}