diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts index f4a3c0a956b..f276ba659c3 100644 --- a/packages/calcite-components/src/components/select/select.e2e.ts +++ b/packages/calcite-components/src/components/select/select.e2e.ts @@ -14,7 +14,7 @@ import { themed, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { findAll } from "../../tests/utils/puppeteer"; +import { findAll, newProgrammaticE2EPage } from "../../tests/utils/puppeteer"; import { CSS } from "./resources"; import type { Select } from "./select"; @@ -422,6 +422,25 @@ describe("calcite-select", () => { await assertSelectedOption(page, await page.find("calcite-option[value='']")); }); + it("does not throw when added and removed multiple times and a row", async () => { + const runTest = async () => { + async function addAndRemoveSelect(page: E2EPage): Promise { + await page.evaluate(async () => { + const select = document.createElement("calcite-select"); + document.body.append(select); + select.remove(); + }); + await page.waitForChanges(); + } + + const page = await newProgrammaticE2EPage(); + await addAndRemoveSelect(page); + await addAndRemoveSelect(page); + }; + + await expect(runTest()).resolves.toBeUndefined(); + }); + describe("is form-associated", () => { formAssociated( html` diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 1f76ae4f986..3f6f03220b8 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -232,7 +232,7 @@ export class Select this.populateInternalSelect(); - const selected = this.selectEl.selectedOptions[0]; + const selected = this.selectEl?.selectedOptions[0]; this.selectFromNativeOption(selected); afterConnectDefaultValueSet(this, this.selectedOption?.value ?? ""); }