fix: incorrectly selecting linear elements on creation while tool-loc…

…ked (excalidraw#5785)
jhjjang · Nov 2, 2022 · e8fba43 · e8fba43
1 parent 2e5c798
commit e8fba43
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
@@ -237,7 +237,7 @@ export const ShapesSwitcher = ({
           keyBindingLabel={`${numberKey}`}
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
-          data-testid={value}
+          data-testid={`toolbar-${value}`}
           onPointerDown={({ pointerType }) => {
             if (!appState.penDetected && pointerType === "pen") {
               setAppState({

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -4836,10 +4836,6 @@ class App extends React.Component<AppProps, AppState> {
           } else {
             this.setState((prevState) => ({
               draggingElement: null,
-              selectedElementIds: {
-                ...prevState.selectedElementIds,
-                [draggingElement.id]: true,
-              },
             }));
           }
         }

diff --git a/src/components/LockButton.tsx b/src/components/LockButton.tsx
@@ -39,6 +39,7 @@ export const LockButton = (props: LockIconProps) => {
         onChange={props.onChange}
         checked={props.checked}
         aria-label={props.title}
+        data-testid="toolbar-lock"
       />
       <div className="ToolIcon__icon">
         {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}

diff --git a/src/tests/queries/toolQueries.ts b/src/tests/queries/toolQueries.ts
@@ -1,6 +1,7 @@
 import { queries, buildQueries } from "@testing-library/react";
 
 const toolMap = {
+  lock: "lock",
   selection: "selection",
   rectangle: "rectangle",
   diamond: "diamond",
@@ -15,7 +16,7 @@ export type ToolName = keyof typeof toolMap;
 
 const _getAllByToolName = (container: HTMLElement, tool: string) => {
   const toolTitle = toolMap[tool as ToolName];
-  return queries.getAllByTestId(container, toolTitle);
+  return queries.getAllByTestId(container, `toolbar-${toolTitle}`);
 };
 
 const getMultipleError = (_container: any, tool: any) =>

diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx
@@ -11,7 +11,8 @@ import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { reseed } from "../random";
 import { API } from "./helpers/api";
-import { Keyboard, Pointer } from "./helpers/ui";
+import { Keyboard, Pointer, UI } from "./helpers/ui";
+import { SHAPES } from "../shapes";
 
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -380,3 +381,19 @@ describe("select single element on the scene", () => {
     h.elements.forEach((element) => expect(element).toMatchSnapshot());
   });
 });
+
+describe("tool locking & selection", () => {
+  it("should not select newly created element while tool is locked", async () => {
+    await render(<ExcalidrawApp />);
+
+    UI.clickTool("lock");
+    expect(h.state.activeTool.locked).toBe(true);
+
+    for (const { value } of Object.values(SHAPES)) {
+      if (value !== "image" && value !== "selection") {
+        const element = UI.createElement(value);
+        expect(h.state.selectedElementIds[element.id]).not.toBe(true);
+      }
+    }
+  });
+});