From f2ec5da0b5e36941c82c9b25e4ba774699565684 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Thu, 20 Oct 2022 14:01:18 -0700
Subject: [PATCH] fix(slider): fix slider (single-value) error when clicking
 range

---
 src/components/slider/slider.e2e.ts | 54 +++++++++++++++++++++++++++++
 src/components/slider/slider.tsx    |  7 ++--
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/components/slider/slider.e2e.ts b/src/components/slider/slider.e2e.ts
index 5285cc07ac4..1c6096e1879 100644
--- a/src/components/slider/slider.e2e.ts
+++ b/src/components/slider/slider.e2e.ts
@@ -270,6 +270,60 @@ describe("calcite-slider", () => {
     expect(changeEvent).toHaveReceivedEventTimes(1);
   });
 
+  describe("thumb focus for single value", () => {
+    const sliderForThumbFocusTests = html`<calcite-slider
+      style="width:${sliderWidthFor1To1PixelValueTrack}"
+      min="0"
+      max="100"
+      snap
+      ticks="10"
+      value="50"
+    ></calcite-slider>`;
+
+    it("should focus thumb when clicked near", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`${sliderForThumbFocusTests}`);
+      const slider = await page.find("calcite-slider");
+      const [trackX, trackY] = await getElementXY(page, "calcite-slider", ".track");
+
+      await page.mouse.move(trackX + 50, trackY);
+      await page.mouse.down();
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      let isThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value")
+      );
+
+      expect(isThumbFocused).toBe(true);
+      expect(await slider.getProperty("value")).toBe(50);
+
+      await page.mouse.move(trackX + 40, trackY);
+      await page.mouse.down();
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      isThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value")
+      );
+
+      expect(isThumbFocused).toBe(true);
+      expect(await slider.getProperty("value")).toBe(40);
+
+      await page.mouse.move(trackX + 60, trackY);
+      await page.mouse.down();
+      await page.mouse.up();
+      await page.waitForChanges();
+
+      isThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value")
+      );
+
+      expect(isThumbFocused).toBe(true);
+      expect(await slider.getProperty("value")).toBe(60);
+    });
+  });
+
   describe("thumb focus in range", () => {
     const sliderForThumbFocusTests = html`<calcite-slider
       style="width:${sliderWidthFor1To1PixelValueTrack}"
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
index c8e14da2adf..07245614865 100644
--- a/src/components/slider/slider.tsx
+++ b/src/components/slider/slider.tsx
@@ -830,7 +830,6 @@ export class Slider
   @Listen("pointerdown")
   pointerDownHandler(event: PointerEvent): void {
     const x = event.clientX || event.pageX;
-    this.focusActiveHandle(x);
     const position = this.translate(x);
     let prop: ActiveSliderProperty = "value";
     if (isRange(this.value)) {
@@ -848,6 +847,7 @@ export class Slider
     if (!isThumbActive) {
       this.setValue(prop, this.clamp(position, prop));
     }
+    this.focusActiveHandle(x);
   }
 
   handleTouchStart(event: TouchEvent): void {
@@ -913,6 +913,8 @@ export class Slider
 
   defaultValue: Slider["value"];
 
+  private activeProp: ActiveSliderProperty = "value";
+
   private guid = `calcite-slider-${guid()}`;
 
   private dragProp: ActiveSliderProperty;
@@ -929,8 +931,6 @@ export class Slider
 
   @State() effectiveLocale = "";
 
-  @State() private activeProp: ActiveSliderProperty = "value";
-
   @State() private minMaxValueRange: number = null;
 
   @State() private minValueDragRange: number = null;
@@ -1004,6 +1004,7 @@ export class Slider
         this.minHandle.focus();
         break;
       case "maxValue":
+      case "value":
         this.maxHandle.focus();
         break;
       case "minMaxValue":