Merge remote-tracking branch 'origin/dev' into benelan/icon-ci-fixes

* origin/dev:
  fix(label): prevent focusing and toggling elements slotted within a label when a text selection occurs (#9990)

Author: benelan

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

@@ -1,5 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { renders, hidden } from "../../tests/commonTests";
+import { isElementFocused } from "../../tests/utils";
+import { html } from "../../../support/formatting";
 
 describe("calcite-label", () => {
   describe("renders", () => {
@@ -145,6 +147,28 @@ describe("calcite-label", () => {
     expect(element).toEqualAttribute("layout", "inline-space-between");
   });
 
+  it("should not focus on the slotted form element when a label's text is selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-label layout="inline-space-between">
+        Label text
+        <calcite-input></calcite-input>
+      </calcite-label>
+    `);
+
+    await page.$eval("calcite-label", (el) => {
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      const range = document.createRange();
+      range.selectNode(el);
+      selection.addRange(range);
+      el.click();
+    });
+    await page.waitForChanges();
+
+    expect(await isElementFocused(page, "calcite-input")).toBe(false);
+  });
+
   // TODO: need shadow DOM equivalent update on helper
   it("clicking sibling label focuses input when both are inside a shadowRoot", async () => {
     const page = await newE2EPage();

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

@@ -77,6 +77,10 @@ export class Label {
   //--------------------------------------------------------------------------
 
   labelClickHandler = (event: MouseEvent): void => {
+    if (window.getSelection()?.type === "Range") {
+      return;
+    }
+
     this.calciteInternalLabelClick.emit({
       sourceEvent: event,
     });