@aurodesignsystem/auro-library 5.13.1 → 5.13.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Semantic Release Automated Changelog
 
+## [5.13.3](https://github.com/AlaskaAirlines/auro-library/compare/v5.13.2...v5.13.3) (2026-08-07)
+
+
+### Bug Fixes
+
+* **floatingUI:** suppress Escape keydown for modal dialogs to prevent CloseWatcher force-close AB[#1613688](https://github.com/AlaskaAirlines/auro-library/issues/1613688) ([efd81c5](https://github.com/AlaskaAirlines/auro-library/commit/efd81c5fd96f4d02253e4ce76b4e7a2ddb8d25c7))
+
+## [5.13.2](https://github.com/AlaskaAirlines/auro-library/compare/v5.13.1...v5.13.2) (2026-07-28)
+
+
+### Bug Fixes
+
+* track visualViewport continuously during scroll lock ([631cf89](https://github.com/AlaskaAirlines/auro-library/commit/631cf89627fd4053b0ae8252736eb1db78919843))
+
 ## [5.13.1](https://github.com/AlaskaAirlines/auro-library/compare/v5.13.0...v5.13.1) (2026-07-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "5.13.1",
+  "version": "5.13.3",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/floatingUI.mjs

@@ -339,15 +339,57 @@ export default class AuroFloatingUI {
         document.body.style.top = `-${this._savedScrollY}px`;
         document.body.style.width = "100%";
 
-        // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
-        if (element?.bib && window?.visualViewport?.offsetTop) {
-          element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
+        // Keep the bib aligned with the visual viewport as the VKB opens.
+        // A one-shot offsetTop check at lock time is stale by the time the user
+        // taps an input mid-drawer — iOS then pans visualViewport upward and the
+        // bib drifts off-screen. Listen continuously so the transform tracks the pan.
+        // RAF-throttled to avoid a style recalc on every scroll tick during the
+        // keyboard animation; the pending frame is canceled on unlock so it cannot
+        // reapply a translate after bibTransform has been restored.
+        if (window.visualViewport) {
+          this._viewportRafId = undefined;
+          this._viewportHandler = () => {
+            if (this._viewportRafId !== undefined) {
+              return;
+            }
+            this._viewportRafId = requestAnimationFrame(() => {
+              this._viewportRafId = undefined;
+              if (element?.bib) {
+                element.bib.style.transform = `translateY(${window.visualViewport.offsetTop}px)`;
+              }
+            });
+          };
+          window.visualViewport.addEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.addEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler();
         }
 
         this.lockTouchScroll(true);
       }
     } else {
       if (this._scrollLocked) {
+        if (this._viewportHandler && window.visualViewport) {
+          window.visualViewport.removeEventListener(
+            "resize",
+            this._viewportHandler,
+          );
+          window.visualViewport.removeEventListener(
+            "scroll",
+            this._viewportHandler,
+          );
+          this._viewportHandler = undefined;
+        }
+        if (this._viewportRafId !== undefined) {
+          cancelAnimationFrame(this._viewportRafId);
+          this._viewportRafId = undefined;
+        }
+
         document.documentElement.style.scrollbarGutter =
           this._savedScrollStyles?.rootScrollbarGutter ?? "";
         document.documentElement.style.overflow =
@@ -439,7 +481,7 @@ export default class AuroFloatingUI {
         bibContent.style.width = "";
         bibContent.style.height = "";
         bibContent.style.maxWidth = "";
-        bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
+        bibContent.style.maxHeight = "";
         this.configureTrial = 0;
       } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
         this.configureTrial += 1;
@@ -736,6 +778,24 @@ export default class AuroFloatingUI {
       if (!this.showing) {
         if (!element.modal) {
           this.setupHideHandlers();
+        } else {
+          if (this.keyDownHandler) {
+            document.removeEventListener("keydown", this.keyDownHandler);
+          }
+          this.keyDownHandler = (evt) => {
+            if (evt.key === "Escape" && element.isPopoverVisible) {
+              // Intercept at keydown so CloseWatcher never sees the keystroke.
+              // Canceling `cancel` alone is insufficient — a second Esc with no
+              // intervening user activation triggers the anti-trap and fires `close`
+              // directly, bypassing any `cancel` preventDefault (AB#1613688).
+              // stopImmediatePropagation is intentional: it prevents other document
+              // keydown handlers (e.g. consumer code, auro-dialog) from also acting
+              // on Escape while the modal owns the key.
+              evt.preventDefault();
+              evt.stopImmediatePropagation();
+            }
+          };
+          document.addEventListener("keydown", this.keyDownHandler);
         }
         this.showing = true;
         element.isPopoverVisible = true;

package/scripts/runtime/floatingUI.test.js

@@ -295,6 +295,85 @@ describe("AuroFloatingUI", () => {
   });
 });
 
+describe("AuroFloatingUI modal Escape suppression (AB#1613688)", () => {
+  let host;
+  let bib;
+  let floatingUI;
+  let hideBibSpy;
+
+  beforeEach(() => {
+    host = document.createElement("div");
+    bib = document.createElement("div");
+    host.bib = bib;
+    host.modal = true;
+    host.isPopoverVisible = false;
+    host.triggerChevron = document.createElement("span");
+    document.body.append(host, bib);
+
+    AuroFloatingUI.openingQueue = [];
+    document.expandedAuroFloater = null;
+
+    floatingUI = new AuroFloatingUI(host, "dialog");
+    hideBibSpy = sinon.spy(floatingUI, "hideBib");
+  });
+
+  afterEach(() => {
+    floatingUI.cleanupHideHandlers();
+    sinon.restore();
+    AuroFloatingUI.isMousePressed = false;
+    AuroFloatingUI.openingQueue = [];
+    document.expandedAuroFloater = null;
+    host?.remove();
+    bib?.remove();
+  });
+
+  it("registers a keydown handler and skips setupHideHandlers when modal=true", () => {
+    const setupHideHandlersSpy = sinon.spy(floatingUI, "setupHideHandlers");
+
+    floatingUI.showBib();
+
+    expect(setupHideHandlersSpy.called).to.be.false;
+    expect(floatingUI.keyDownHandler).to.be.a("function");
+    expect(floatingUI.showing).to.be.true;
+  });
+
+  it("does not call hideBib when Escape is pressed while modal dialog is open", () => {
+    floatingUI.showBib();
+
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(hideBibSpy.called).to.be.false;
+  });
+
+  it("calls preventDefault on Escape keydown while modal dialog is open", () => {
+    floatingUI.showBib();
+
+    const escEvent = new KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    });
+    const preventDefaultSpy = sinon.spy(escEvent, "preventDefault");
+    document.dispatchEvent(escEvent);
+
+    expect(preventDefaultSpy.calledOnce).to.be.true;
+  });
+
+  it("removes the modal Escape keydown handler via cleanupHideHandlers", () => {
+    floatingUI.showBib();
+    expect(floatingUI.keyDownHandler).to.be.a("function");
+
+    floatingUI.cleanupHideHandlers();
+    expect(floatingUI.keyDownHandler).to.be.null;
+  });
+});
+
 describe("AuroFloatingUI.openingQueue and topOpeningFloatingUI", () => {
   let floatingUI1;
   let floatingUI2;