From 60c311296dafce84c478e5babdabdb63b110511c Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Wed, 4 Jan 2023 14:59:23 +0530
Subject: [PATCH] [ Bug fixed ] : [Multi-Select widget ] app freezes when we
 use control component action to control the same multi-select (#5011)

* bug fixed: app freezes

* bug fixed : app frezzes when invalid value is provided
---
 .../src/Editor/Components/Multiselect.jsx     | 58 +++++++++++--------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/frontend/src/Editor/Components/Multiselect.jsx b/frontend/src/Editor/Components/Multiselect.jsx
index 72bbe2292f..f1ef850772 100644
--- a/frontend/src/Editor/Components/Multiselect.jsx
+++ b/frontend/src/Editor/Components/Multiselect.jsx
@@ -75,43 +75,53 @@ export const Multiselect = function Multiselect({
   registerAction(
     'selectOption',
     async function (value) {
-      const newSelected = [
-        ...selected,
-        ...selectOptions.filter(
-          (option) => option.value === value && !selected.map((selectedOption) => selectedOption.value).includes(value)
-        ),
-      ];
-      setSelected(newSelected);
-      setExposedVariable(
-        'values',
-        newSelected.map((item) => item.value)
-      ).then(() => fireEvent('onSelect'));
+      if (
+        selectOptions.some((option) => option.value === value) &&
+        !selected.some((option) => option.value === value)
+      ) {
+        const newSelected = [
+          ...selected,
+          ...selectOptions.filter(
+            (option) =>
+              option.value === value && !selected.map((selectedOption) => selectedOption.value).includes(value)
+          ),
+        ];
+        setSelected(newSelected);
+        setExposedVariable(
+          'values',
+          newSelected.map((item) => item.value)
+        ).then(() => fireEvent('onSelect'));
+      }
     },
     [selected, setSelected]
   );
   registerAction(
     'deselectOption',
     async function (value) {
-      const newSelected = [
-        ...selected.filter(function (item) {
-          return item.value !== value;
-        }),
-      ];
-      setSelected(newSelected);
-      setExposedVariable(
-        'values',
-        newSelected.map((item) => item.value)
-      ).then(() => fireEvent('onSelect'));
+      if (selectOptions.some((option) => option.value === value) && selected.some((option) => option.value === value)) {
+        const newSelected = [
+          ...selected.filter(function (item) {
+            return item.value !== value;
+          }),
+        ];
+        setSelected(newSelected);
+        setExposedVariable(
+          'values',
+          newSelected.map((item) => item.value)
+        ).then(() => fireEvent('onSelect'));
+      }
     },
     [selected, setSelected]
   );
   registerAction(
     'clearSelections',
     async function () {
-      setSelected([]);
-      setExposedVariable('values', []).then(() => fireEvent('onSelect'));
+      if (selected.length >= 1) {
+        setSelected([]);
+        setExposedVariable('values', []).then(() => fireEvent('onSelect'));
+      }
     },
-    [setSelected]
+    [selected, setSelected]
   );
 
   return (