fix(color-picker): prevent text selection when using color sliders/fi…

…eld (#10043) **Related Issue:** #9977 ## Summary Restores prevention of text-selection when using the color field/sliders.
Esri · Aug 13, 2024 · ab33e4d · ab33e4d
1 parent 2c3f808
commit ab33e4d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -7,6 +7,7 @@ import {
   newProgrammaticE2EPage,
   toBeNumber,
   toBeInteger,
+  getElementRect,
 } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, SCOPE_SIZE } from "./resources";
@@ -807,6 +808,34 @@ describe("calcite-color-picker", () => {
     expect(hueScopeCenterX).toBe(hueSliderX + sliderWidth - DIMENSIONS.m.thumb.radius);
   });
 
+  it("does not allow text selection when color field/sliders are used", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-color-picker alpha-channel></calcite-color-picker>`);
+    const { x: hueSliderX, y: hueSliderY } = await getElementRect(page, "calcite-color-picker", `.${CSS.hueSlider}`);
+    const { x: opacitySliderX, y: opacitySliderY } = await getElementRect(
+      page,
+      "calcite-color-picker",
+      `.${CSS.opacitySlider}`,
+    );
+    const { x: colorFieldX, y: colorFieldY } = await getElementRect(page, "calcite-color-picker", `.${CSS.colorField}`);
+
+    const dragStartPoints = [
+      [colorFieldX, colorFieldY],
+      [hueSliderX, hueSliderY],
+      [opacitySliderX, opacitySliderY],
+    ];
+
+    for (const [startingX, startingY] of dragStartPoints) {
+      await page.mouse.move(startingX, startingY);
+      await page.mouse.down();
+      await page.mouse.move(1000, 1000);
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      expect(await page.evaluate(() => window.getSelection().type)).toBe("None");
+    }
+  });
+
   describe("unsupported value handling", () => {
     let page: E2EPage;
 

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.scss b/packages/calcite-components/src/components/color-picker/color-picker.scss
@@ -74,6 +74,11 @@
   @apply flex relative cursor-pointer touch-none;
 }
 
+.color-field,
+.control-and-scope {
+  user-select: none;
+}
+
 .scope {
   @apply text-n1
     focus-base