diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts index 02313e8ea9e..64867a6d3df 100644 --- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts +++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts @@ -678,6 +678,78 @@ describe("calcite-carousel", () => { expect(await carousel.getProperty("paused")).toBe(false); expect(selectedItem.id).toEqual("three"); }); + + it("does not begin autoplay after keyboard interaction if not enabled via property", async () => { + const page = await newE2EPage(); + + await page.setContent( + `

no pre-selected attribute

+

pre-selected and not first

+

no pre-selected attribute

+
`, + ); + + const carousel = await page.find("calcite-carousel"); + const playSpy = await page.spyOnEvent("calciteCarouselPlay"); + const stopSpy = await page.spyOnEvent("calciteCarouselStop"); + const pauseSpy = await page.spyOnEvent("calciteCarouselPause"); + const resumeSpy = await page.spyOnEvent("calciteCarouselResume"); + + let selectedItem = await carousel.find(`calcite-carousel-item[selected]`); + expect(selectedItem.id).toEqual("two"); + expect(playSpy).not.toHaveReceivedEvent(); + expect(stopSpy).not.toHaveReceivedEvent(); + expect(pauseSpy).not.toHaveReceivedEvent(); + expect(resumeSpy).not.toHaveReceivedEvent(); + expect(await carousel.getProperty("paused")).toBe(undefined); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(selectedItem.id).toEqual("two"); + expect(playSpy).not.toHaveReceivedEvent(); + expect(stopSpy).not.toHaveReceivedEvent(); + expect(pauseSpy).not.toHaveReceivedEvent(); + expect(resumeSpy).not.toHaveReceivedEvent(); + expect(await page.evaluate(() => document.activeElement.id)).toEqual(carousel.id); + + await page.waitForTimeout(slideDurationWaitTimer); + selectedItem = await carousel.find(`calcite-carousel-item[selected]`); + expect(selectedItem.id).toEqual("two"); + + await page.keyboard.press("Enter"); + await page.waitForChanges(); + expect(selectedItem.id).toEqual("two"); + expect(playSpy).not.toHaveReceivedEvent(); + expect(stopSpy).not.toHaveReceivedEvent(); + expect(pauseSpy).not.toHaveReceivedEvent(); + expect(resumeSpy).not.toHaveReceivedEvent(); + expect(await carousel.getProperty("paused")).toBe(undefined); + expect(selectedItem.id).toEqual("two"); + + await page.waitForTimeout(slideDurationWaitTimer); + selectedItem = await carousel.find(`calcite-carousel-item[selected]`); + expect(selectedItem.id).toEqual("two"); + + await page.keyboard.press("Space"); + await page.waitForChanges(); + expect(playSpy).not.toHaveReceivedEvent(); + expect(stopSpy).not.toHaveReceivedEvent(); + expect(pauseSpy).not.toHaveReceivedEvent(); + expect(resumeSpy).not.toHaveReceivedEvent(); + expect(await carousel.getProperty("paused")).toBe(undefined); + + expect(selectedItem.id).toEqual("two"); + + await page.keyboard.press("Space"); + await page.waitForChanges(); + expect(playSpy).not.toHaveReceivedEvent(); + expect(stopSpy).not.toHaveReceivedEvent(); + expect(pauseSpy).not.toHaveReceivedEvent(); + expect(resumeSpy).not.toHaveReceivedEvent(); + expect(await carousel.getProperty("paused")).toBe(undefined); + expect(selectedItem.id).toEqual("two"); + }); }); describe("pagination", () => { @@ -773,6 +845,7 @@ describe("calcite-carousel", () => { expect(selectedItem.id).toEqual("two"); }); }); + describe("public methods", () => { it("plays and stops correctly when autoplay", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index 5d1da2948b7..fb15ae06c3b 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -498,7 +498,9 @@ export class Carousel case " ": case "Enter": event.preventDefault(); - this.toggleRotation(); + if (this.autoplay === "" || this.autoplay || this.autoplay === "paused") { + this.toggleRotation(); + } break; case "ArrowRight": this.direction = "forward";