diff --git a/src/modal-enhancer.ts b/src/modal-enhancer.ts index 0915e6f..7a213b8 100644 --- a/src/modal-enhancer.ts +++ b/src/modal-enhancer.ts @@ -28,6 +28,7 @@ const NON_DRAGGABLE_SELECTOR = [ ".clickable-icon", ".slider", ".dropdown", + ".pcr-app", "[data-setmove-role='resize-handle']", "[data-setmove-role='preset-control']", ].join(", "); diff --git a/tests/drag-resize.test.ts b/tests/drag-resize.test.ts index 8ad38ee..bae0b02 100644 --- a/tests/drag-resize.test.ts +++ b/tests/drag-resize.test.ts @@ -245,6 +245,50 @@ describe("modal enhancer interactions", () => { enhancer.destroy(); }); + it("does not drag from a custom color picker", () => { + const match = createSettingsFixture({ + extraContent: ` +
+
+
+
+
+
+
+ `, + }); + const onGeometryPersist = vi.fn(); + const enhancer = enhanceSettingsModal(match, { + settings: { + ...DEFAULT_SETTINGS, + }, + onGeometryPersist, + }); + + stubPointerCapture(match.modalEl); + + const palette = match.modalEl.querySelector(".pcr-palette"); + if (!palette) { + throw new Error("Missing color picker palette"); + } + + palette.dispatchEvent( + pointerEvent("pointerdown", { pointerId: 23, clientX: 20, clientY: 20 }), + ); + palette.dispatchEvent( + pointerEvent("pointermove", { pointerId: 23, clientX: 120, clientY: 100 }), + ); + palette.dispatchEvent( + pointerEvent("pointerup", { pointerId: 23, clientX: 120, clientY: 100 }), + ); + + expect(match.modalEl.style.left).toBe("270px"); + expect(match.modalEl.style.top).toBe("130px"); + expect(onGeometryPersist).not.toHaveBeenCalled(); + + enhancer.destroy(); + }); + it("persists geometry after resize and clamps it into the host bounds", () => { const match = createSettingsFixture(); const onGeometryPersist = vi.fn();