fix(input-date-picker, input-time-picker, modal, sheet): closes on escape when focusTrap is disabled

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

@@ -351,6 +351,33 @@ describe("calcite-input-date-picker", () => {
       });
     });
 
+    it("closes when Escape key is pressed and focusTrapDisabled=true", async () => {
+      page = await newE2EPage();
+      await page.setContent(
+        html` <calcite-input-date-picker value="2000-11-27" focus-trap-disabled></calcite-input-date-picker>`,
+      );
+      await skipAnimations(page);
+      await page.waitForChanges();
+      inputDatePicker = await page.find("calcite-input-date-picker");
+      let calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
+
+      expect(await calendar.isVisible()).toBe(false);
+
+      await inputDatePicker.callMethod("setFocus");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
+
+      expect(await calendar.isVisible()).toBe(true);
+
+      await page.keyboard.press("Escape");
+      await page.waitForChanges();
+      calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
+
+      expect(await calendar.isVisible()).toBe(false);
+    });
+
     describe("range", () => {
       beforeEach(async () => {
         page = await newE2EPage();

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

@@ -796,7 +796,7 @@ export class InputDatePicker
       this.open = true;
       this.focusOnOpen = true;
       event.preventDefault();
-    } else if (key === "Escape") {
+    } else if (this.open && key === "Escape") {
       this.open = false;
       event.preventDefault();
       this.restoreInputFocus(true);

packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts

@@ -987,4 +987,27 @@ describe("calcite-input-time-picker", () => {
       expect(await popoverPositionContainer.isVisible()).toBe(false);
     });
   });
+
+  it("closes when Escape key is pressed and focusTrapDisabled=true", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html` <calcite-input-time-picker focus-trap-disabled></calcite-input-time-picker>`);
+    await skipAnimations(page);
+    await page.waitForChanges();
+    const inputTimePicker = await page.find("calcite-input-time-picker");
+    let popover = await page.find("calcite-input-time-picker >>> calcite-popover");
+
+    await inputTimePicker.callMethod("setFocus");
+    await page.waitForChanges();
+    await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
+    popover = await page.find("calcite-input-time-picker >>> calcite-popover");
+
+    expect(await popover.getProperty("open")).toBe(true);
+
+    await page.keyboard.press("Escape");
+    await page.waitForChanges();
+    popover = await page.find("calcite-input-time-picker >>> calcite-popover");
+
+    expect(await popover.getProperty("open")).toBe(false);
+  });
 });

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

@@ -729,6 +729,9 @@ export class InputTimePicker
     } else if (key === "ArrowDown") {
       this.open = true;
       event.preventDefault();
+    } else if (this.open && key === "Escape") {
+      this.open = false;
+      event.preventDefault();
     }
   }
 

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

@@ -411,6 +411,22 @@ describe("calcite-modal", () => {
     expect(await modal.isVisible()).toBe(true);
   });
 
+  it("closes when Escape key is pressed and focusTrapDisabled=true", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-modal focus-trap-disabled></calcite-modal>`);
+    await skipAnimations(page);
+    const modal = await page.find("calcite-modal");
+
+    modal.setProperty("open", true);
+    await page.waitForChanges();
+    expect(await modal.isVisible()).toBe(true);
+
+    await page.keyboard.press("Escape");
+    await page.waitForChanges();
+    expect(await modal.isVisible()).toBe(false);
+    expect(await modal.getProperty("open")).toBe(false);
+  });
+
   it("closes when Escape key is pressed and modal is open on page load", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-modal open></calcite-modal>`);

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

@@ -265,6 +265,11 @@ export class Modal
 
   // #region Lifecycle
 
+  constructor() {
+    super();
+    this.listen("keydown", this.keyDownHandler);
+  }
+
   override connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] });
@@ -329,6 +334,19 @@ export class Modal
 
   // #region Private Methods
 
+  private keyDownHandler = (event: KeyboardEvent): void => {
+    const { defaultPrevented, key } = event;
+
+    if (defaultPrevented) {
+      return;
+    }
+
+    if (this.open && !this.escapeDisabled && key === "Escape" && this.focusTrapDisabled) {
+      this.open = false;
+      event.preventDefault();
+    }
+  };
+
   private handleFocusTrapDisabled(focusTrapDisabled: boolean): void {
     if (!this.open) {
       return;

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

@@ -283,6 +283,33 @@ describe("calcite-sheet properties", () => {
     expect(await sheet.isVisible()).toBe(true);
   });
 
+  it("closes when Escape key is pressed and focusTrapDisabled=true", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-sheet open label="hello world" focus-trap-disabled
+        ><calcite-panel heading="Ultrices neque"
+          ><p>Lorem ipsum dolor sit amet.</p>
+          <calcite-button slot="footer" width="half">tincidunt lobortis</calcite-button>
+        </calcite-panel></calcite-sheet
+      >`,
+    );
+    const sheet = await page.find("calcite-sheet");
+    sheet.setProperty("open", true);
+    await page.waitForChanges();
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await sheet.isVisible()).toBe(true);
+    expect(await sheet.getProperty("open")).toBe(true);
+
+    await page.keyboard.press("Escape");
+    await page.waitForChanges();
+
+    expect(await sheet.isVisible()).toBe(false);
+    expect(await sheet.getProperty("open")).toBe(false);
+  });
+
   it("should close when the scrim is clicked", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-sheet ></calcite-sheet>`);

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

@@ -196,6 +196,11 @@ export class Sheet
 
   // #region Lifecycle
 
+  constructor() {
+    super();
+    this.listen("keydown", this.keyDownHandler);
+  }
+
   override connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     connectFocusTrap(this, {
@@ -245,6 +250,19 @@ export class Sheet
 
   // #region Private Methods
 
+  private keyDownHandler = (event: KeyboardEvent): void => {
+    const { defaultPrevented, key } = event;
+
+    if (defaultPrevented || this.escapeDisabled) {
+      return;
+    }
+
+    if (this.open && key === "Escape") {
+      event.preventDefault();
+      this.open = false;
+    }
+  };
+
   private handleFocusTrapDisabled(focusTrapDisabled: boolean): void {
     if (!this.open) {
       return;