From 94714ecf9e73b10a1a2b6752e16d4be27e3c3653 Mon Sep 17 00:00:00 2001
From: Gandharv <gandharvkumargarg@gmail.com>
Date: Wed, 19 Oct 2022 09:29:04 +0700
Subject: [PATCH] fix: disable multiple selection of components while comments
 feature is toggled on (#4470)

* fix: disable multiple selection of components while comments feature is toggled on

* fix: add nullish collesion check
---
 frontend/src/Editor/Editor.jsx     | 38 ++++++++++++++++--------------
 frontend/src/_ui/Mentions/index.js |  2 +-
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index f1f33e5bd4..36407f813c 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -1337,24 +1337,26 @@ class EditorComponent extends React.Component {
                 isSaving={this.state.isSaving}
                 isUnsavedQueriesAvailable={this.state.isUnsavedQueriesAvailable}
               />
-              <Selecto
-                dragContainer={'.canvas-container'}
-                selectableTargets={['.react-draggable']}
-                hitRate={0}
-                selectByClick={true}
-                toggleContinueSelect={['shift']}
-                ref={this.selectionRef}
-                scrollOptions={this.state.scrollOptions}
-                onSelectStart={this.onAreaSelectionStart}
-                onSelectEnd={this.onAreaSelectionEnd}
-                onSelect={this.onAreaSelection}
-                onDragStart={this.onAreaSelectionDragStart}
-                onDrag={this.onAreaSelectionDrag}
-                onDragEnd={this.onAreaSelectionDragEnd}
-                onScroll={(e) => {
-                  this.canvasContainerRef.current.scrollBy(e.direction[0] * 10, e.direction[1] * 10);
-                }}
-              ></Selecto>
+              {!showComments && (
+                <Selecto
+                  dragContainer={'.canvas-container'}
+                  selectableTargets={['.react-draggable']}
+                  hitRate={0}
+                  selectByClick={true}
+                  toggleContinueSelect={['shift']}
+                  ref={this.selectionRef}
+                  scrollOptions={this.state.scrollOptions}
+                  onSelectStart={this.onAreaSelectionStart}
+                  onSelectEnd={this.onAreaSelectionEnd}
+                  onSelect={this.onAreaSelection}
+                  onDragStart={this.onAreaSelectionDragStart}
+                  onDrag={this.onAreaSelectionDrag}
+                  onDragEnd={this.onAreaSelectionDragEnd}
+                  onScroll={(e) => {
+                    this.canvasContainerRef.current.scrollBy(e.direction[0] * 10, e.direction[1] * 10);
+                  }}
+                ></Selecto>
+              )}
               <div className="main main-editor-canvas" id="main-editor-canvas">
                 <div
                   className={`canvas-container align-items-center ${!showLeftSidebar && 'hide-sidebar'}`}
diff --git a/frontend/src/_ui/Mentions/index.js b/frontend/src/_ui/Mentions/index.js
index 516c6f3c99..5df51655e7 100644
--- a/frontend/src/_ui/Mentions/index.js
+++ b/frontend/src/_ui/Mentions/index.js
@@ -100,7 +100,7 @@ const Mentions = ({ searchUser, value = '', setValue, setMentionedUsers, placeho
                 textTransform: 'uppercase',
               }}
             >
-              {suggestion.first_name.slice(0, 1) + suggestion.last_name.slice(0, 1)}
+              {suggestion?.first_name.slice(0, 1) + suggestion?.last_name.slice(0, 1)}
             </div>
             <div
               style={{