feat(handle): Add blurUnselectDisabled property to disable unselecting handle on blur.

packages/calcite-components/src/components.d.ts

@@ -1769,6 +1769,10 @@ export namespace Components {
     }
     interface CalciteHandle {
         "activated": boolean;
+        /**
+          * When `true`, disables unselecting the component when blurred.
+         */
+        "blurUnselectDisabled": boolean;
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
@@ -9063,6 +9067,10 @@ declare namespace LocalJSX {
     }
     interface CalciteHandle {
         "activated"?: boolean;
+        /**
+          * When `true`, disables unselecting the component when blurred.
+         */
+        "blurUnselectDisabled"?: boolean;
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */

packages/calcite-components/src/components/handle/handle.e2e.ts

@@ -37,6 +37,51 @@ describe("calcite-handle", () => {
     expect(await handle.getProperty("activated")).toBe(true);
   });
 
+  it("sets activated to false when blurred", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-handle></calcite-handle>");
+
+    const handle = await page.find("calcite-handle");
+    const button = await page.find(`calcite-handle >>> .${CSS.handle}`);
+
+    expect(await handle.getProperty("activated")).toBe(false);
+
+    await button.focus();
+
+    await page.keyboard.press(" ");
+
+    await page.waitForChanges();
+
+    expect(await handle.getProperty("activated")).toBe(true);
+
+    await page.$eval("calcite-handle", (handle: HTMLCalciteHandleElement) => handle.blur());
+
+    expect(await handle.getProperty("activated")).toBe(false);
+  });
+
+  it("does not set activated to false when blurUnselectDisabled and blurred", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-handle blur-unselect-disabled></calcite-handle>");
+
+    const handle = await page.find("calcite-handle");
+    const button = await page.find(`calcite-handle >>> .${CSS.handle}`);
+
+    expect(await handle.getProperty("blurUnselectDisabled")).toBe(true);
+    expect(await handle.getProperty("activated")).toBe(false);
+
+    await button.focus();
+
+    await page.keyboard.press(" ");
+
+    await page.waitForChanges();
+
+    expect(await handle.getProperty("activated")).toBe(true);
+
+    await page.$eval("calcite-handle", (handle: HTMLCalciteHandleElement) => handle.blur());
+
+    expect(await handle.getProperty("activated")).toBe(true);
+  });
+
   it("fires calciteHandleNudge event when focused and up or down key is pressed", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-handle></calcite-handle>");

packages/calcite-components/src/components/handle/handle.tsx

@@ -106,6 +106,13 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo
    */
   @Prop() label: string;
 
+  /**
+   * When `true`, disables unselecting the component when blurred.
+   *
+   * @internal
+   */
+  @Prop() blurUnselectDisabled = false;
+
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -251,7 +258,7 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo
   };
 
   handleBlur = (): void => {
-    if (this.disabled) {
+    if (this.blurUnselectDisabled || this.disabled) {
       return;
     }
 

packages/calcite-components/src/components/list/list.tsx

@@ -954,6 +954,7 @@ export class List
     }
 
     this.disconnectObserver();
+    handle.blurUnselectDisabled = true;
 
     const referenceEl =
       (direction === "up" && newIndex !== lastIndex) || (direction === "down" && newIndex === 0)
@@ -973,8 +974,6 @@ export class List
       oldIndex,
     });
 
-    handle.setFocus().then(() => {
-      handle.activated = true;
-    });
+    handle.setFocus().then(() => (handle.blurUnselectDisabled = false));
   }
 }