From f2704a38ef66204faf595e4e11a7be706d32a0f6 Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam <kavin.saratha@gmail.com>
Date: Thu, 11 Jan 2024 16:33:37 +0530
Subject: [PATCH] Cleared selected components while switching the layout

---
 frontend/src/Editor/Header/HeaderActions.jsx | 18 ++++++++++++++++--
 frontend/src/_stores/editorStore.js          |  6 ++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Editor/Header/HeaderActions.jsx b/frontend/src/Editor/Header/HeaderActions.jsx
index 5f341f39f3..1eae87f904 100644
--- a/frontend/src/Editor/Header/HeaderActions.jsx
+++ b/frontend/src/Editor/Header/HeaderActions.jsx
@@ -14,6 +14,14 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
     }),
     shallow
   );
+
+  const clearSelectionBorder = () => {
+    const selectedElems = document.getElementsByClassName('resizer-select');
+    for (const element of selectedElems) {
+      element.classList.remove('resizer-select');
+    }
+  };
+
   return (
     <div className="editor-header-actions">
       <div style={{ borderRadius: 6 }}>
@@ -34,7 +42,10 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
             type="button"
             aria-selected="true"
             tabIndex="0"
-            onClick={() => toggleCurrentLayout('desktop')}
+            onClick={() => {
+              clearSelectionBorder();
+              toggleCurrentLayout('desktop');
+            }}
             data-cy={`button-change-layout-to-desktop`}
           >
             <SolidIcon
@@ -54,7 +65,10 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
             style={{ height: 20 }}
             aria-selected="false"
             tabIndex="-1"
-            onClick={() => toggleCurrentLayout('mobile')}
+            onClick={() => {
+              clearSelectionBorder();
+              toggleCurrentLayout('mobile');
+            }}
             data-cy={`button-change-layout-to-mobile`}
           >
             <SolidIcon
diff --git a/frontend/src/_stores/editorStore.js b/frontend/src/_stores/editorStore.js
index adb55a9eef..d9110fa5d3 100644
--- a/frontend/src/_stores/editorStore.js
+++ b/frontend/src/_stores/editorStore.js
@@ -56,11 +56,13 @@ export const useEditorStore = create(
         set({ showComments: !get().showComments }, false, {
           type: ACTIONS.TOGGLE_COMMENTS,
         }),
-      toggleCurrentLayout: (currentLayout) =>
+      toggleCurrentLayout: (currentLayout) => {
+        set({ selectedComponents: EMPTY_ARRAY });
         set({ currentLayout }, false, {
           type: ACTIONS.TOGGLE_CURRENT_LAYOUT,
           currentLayout,
-        }),
+        });
+      },
       setIsEditorActive: (isEditorActive) => set(() => ({ isEditorActive })),
       updateEditorState: (state) => set((prev) => ({ ...prev, ...state })),
       updateQueryConfirmationList: (queryConfirmationList) => set({ queryConfirmationList }),