From 8608d7b2e000ac5f756c263e2c0d04e3f93485c4 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sun, 12 Oct 2025 23:33:02 +0200
Subject: [PATCH] fix: revert preferred selection to box once you switch to
 `full` UI (#10160)

---
 packages/excalidraw/components/App.tsx | 33 +++++++++++++++++---------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index c74ef73b52..574ec4eb91 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -2487,18 +2487,29 @@ class App extends React.Component<AppProps, AppState> {
       canFitSidebar: editorWidth > sidebarBreakpoint,
     });
 
+    const stylesPanelMode =
+      // NOTE: we could also remove the isMobileOrTablet check here and
+      // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP)
+      // but not too narrow (> MQ_MAX_WIDTH_MOBILE)
+      this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet()
+        ? "compact"
+        : this.isMobileBreakpoint(editorWidth, editorHeight)
+        ? "mobile"
+        : "full";
+
     // also check if we need to update the app state
-    this.setState({
-      stylesPanelMode:
-        // NOTE: we could also remove the isMobileOrTablet check here and
-        // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP)
-        // but not too narrow (> MQ_MAX_WIDTH_MOBILE)
-        this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet()
-          ? "compact"
-          : this.isMobileBreakpoint(editorWidth, editorHeight)
-          ? "mobile"
-          : "full",
-    });
+    this.setState((prevState) => ({
+      stylesPanelMode,
+      // reset to box selection mode if the UI changes to full
+      // where you'd not be able to change the mode yourself currently
+      preferredSelectionTool:
+        stylesPanelMode === "full"
+          ? {
+              type: "selection",
+              initialized: true,
+            }
+          : prevState.preferredSelectionTool,
+    }));
 
     if (prevEditorState !== nextEditorState) {
       this.device = { ...this.device, editor: nextEditorState };