From 7bfc3188f741c84bfa29d1e8a69a92bd86c75fcb Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Wed, 10 Sep 2025 01:46:58 +0300
Subject: [PATCH] Fix layer selection (#1366)

## Launch Checklist

- This fixes the issue of layer selection that was introduced as part of
the migration to dnd-kit #1359
- Fixes #1364

This also adds the relevant test.

 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
 - [x] Write tests for all new functionality.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 cypress/e2e/layers.cy.ts     | 18 ++++++++++++++++++
 src/components/LayerList.tsx |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts
index a3d47074..26813dd1 100644
--- a/cypress/e2e/layers.cy.ts
+++ b/cypress/e2e/layers.cy.ts
@@ -97,8 +97,26 @@ describe("layers", () => {
           });
         });
       });
+
+      describe("when selecting a layer", () => {
+        let secondId: string;
+        beforeEach(() => {
+          when.modal.open();
+          secondId = when.modal.fillLayers({
+            id: "second-layer",
+            type: "background",
+          });
+        });
+        it("should show the selected layer in the editor", () => {
+          when.realClick("layer-list-item:" + secondId);
+          then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(secondId);
+          when.realClick("layer-list-item:" + id);
+          then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(id);
+        });
+      });
     });
   });
+
   describe("background", () => {
     it("add", () => {
       const id = when.modal.fillLayers({
diff --git a/src/components/LayerList.tsx b/src/components/LayerList.tsx
index 3de16c58..dc382526 100644
--- a/src/components/LayerList.tsx
+++ b/src/components/LayerList.tsx
@@ -336,7 +336,7 @@ type LayerListProps = LayerListContainerProps & {
 };
 
 const LayerList: React.FC<LayerListProps> = (props) => {
-  const sensors = useSensors(useSensor(PointerSensor));
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
 
   const handleDragEnd = (event: DragEndEvent) => {
     const {active, over} = event;