diff --git a/packages/calcite-components/src/components/label/label.e2e.ts b/packages/calcite-components/src/components/label/label.e2e.ts index 44d5e02483b..664d3a8bc56 100644 --- a/packages/calcite-components/src/components/label/label.e2e.ts +++ b/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` + + Label text + + + `); + + 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(); diff --git a/packages/calcite-components/src/components/label/label.tsx b/packages/calcite-components/src/components/label/label.tsx index 06f9d89d9c6..56b112ca0a9 100644 --- a/packages/calcite-components/src/components/label/label.tsx +++ b/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, });