fix: deselect elements on viewMode toggle (#3741)

src/actions/actionToggleViewMode.tsx

@@ -10,7 +10,6 @@ export const actionToggleViewMode = register({
       appState: {
         ...appState,
         viewModeEnabled: !this.checked!(appState),
-        selectedElementIds: {},
       },
       commitToHistory: false,
     };

src/components/App.tsx

@@ -922,14 +922,12 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
-      this.setState(
+      this.setState({ viewModeEnabled: !!this.props.viewModeEnabled });
-        { viewModeEnabled: !!this.props.viewModeEnabled },
-        this.addEventListeners,
-      );
     }
 
     if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {
       this.addEventListeners();
+      this.deselectElements();
     }
 
     if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {
@@ -1770,15 +1768,19 @@ class App extends React.Component<AppProps, AppState> {
       excalidrawContainer: this.excalidrawContainerRef.current,
     });
     // deselect all other elements when inserting text
+    this.deselectElements();
+
+    // do an initial update to re-initialize element position since we were
+    // modifying element's x/y for sake of editor (case: syncing to remote)
+    updateElement(element.text);
+  }
+
+  private deselectElements() {
     this.setState({
       selectedElementIds: {},
       selectedGroupIds: {},
       editingGroupId: null,
     });
-
-    // do an initial update to re-initialize element position since we were
-    // modifying element's x/y for sake of editor (case: syncing to remote)
-    updateElement(element.text);
   }
 
   private getTextElementAtPosition(