From 989cef51cc2826684ddfd1f16f7ef1902ed24df9 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Fri, 25 Apr 2025 21:18:16 +1000
Subject: [PATCH] focus on panel after click

---
 packages/excalidraw/components/App.tsx          | 6 +++++-
 packages/excalidraw/components/ShapeSwitch.scss | 4 ++++
 packages/excalidraw/components/ShapeSwitch.tsx  | 7 ++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 1046f67b2..b2b77d3c0 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -469,6 +469,7 @@ import { EraserTrail } from "../eraser";
 
 import ShapeSwitch, {
   getSwitchableTypeFromElements,
+  SHAPE_SWITCH_PANEL_CLASSNAME,
   shapeSwitchAtom,
   switchShapes,
 } from "./ShapeSwitch";
@@ -4168,7 +4169,10 @@ class App extends React.Component<AppProps, AppState> {
           editorJotaiStore.set(shapeSwitchAtom, null);
         } else if (
           event.key === KEYS.TAB &&
-          document.activeElement === this.excalidrawContainerRef?.current
+          (document.activeElement === this.excalidrawContainerRef?.current ||
+            document.activeElement?.classList.contains(
+              SHAPE_SWITCH_PANEL_CLASSNAME,
+            ))
         ) {
           event.preventDefault();
 
diff --git a/packages/excalidraw/components/ShapeSwitch.scss b/packages/excalidraw/components/ShapeSwitch.scss
index 88970a93d..4406d32d0 100644
--- a/packages/excalidraw/components/ShapeSwitch.scss
+++ b/packages/excalidraw/components/ShapeSwitch.scss
@@ -43,5 +43,9 @@
     background: var(--island-bg-color);
     box-shadow: var(--shadow-island);
     padding: 0.5rem;
+
+    &:focus {
+      outline: none;
+    }
   }
 }
diff --git a/packages/excalidraw/components/ShapeSwitch.tsx b/packages/excalidraw/components/ShapeSwitch.tsx
index 85f915c85..4ae2b7f5d 100644
--- a/packages/excalidraw/components/ShapeSwitch.tsx
+++ b/packages/excalidraw/components/ShapeSwitch.tsx
@@ -88,6 +88,7 @@ import type { AppClassProperties } from "../types";
 
 const GAP_HORIZONTAL = 8;
 const GAP_VERTICAL = 10;
+export const SHAPE_SWITCH_PANEL_CLASSNAME = "ShapeSwitch__Panel";
 
 export const shapeSwitchAtom = atom<{
   type: "panel";
@@ -180,6 +181,7 @@ const Panel = ({
 
   const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
   const positionRef = useRef("");
+  const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const elements = [...genericElements, ...linearElements].sort((a, b) =>
@@ -288,6 +290,8 @@ const Panel = ({
 
   return (
     <div
+      ref={panelRef}
+      tabIndex={-1}
       style={{
         position: "absolute",
         top: `${
@@ -298,7 +302,7 @@ const Panel = ({
         left: `${panelPosition.x - app.state.offsetLeft - GAP_HORIZONTAL}px`,
         zIndex: 2,
       }}
-      className="ShapeSwitch__Panel"
+      className={SHAPE_SWITCH_PANEL_CLASSNAME}
     >
       {SHAPES.map(([type, icon]) => {
         const isSelected =
@@ -329,6 +333,7 @@ const Panel = ({
                   | ConvertibleGenericTypes
                   | ConvertibleLinearTypes,
               });
+              panelRef.current?.focus();
             }}
           />
         );