@cartridge/controller 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartridge/controller",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Cartridge Controller",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,7 +53,7 @@
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.4.1",
-    "@cartridge/tsconfig": "0.9.1"
+    "@cartridge/tsconfig": "0.9.2"
   },
   "scripts": {
     "build:deps": "pnpm build",

package/src/controller.ts

@@ -89,8 +89,12 @@ export default class ControllerProvider extends BaseProvider {
       iframes.forEach((iframe) => {
         const container = iframe.parentElement;
         if (container) {
-          container.style.visibility = "hidden";
+          // Start fade-out transition
           container.style.opacity = "0";
+          // Set display: none after transition completes
+          setTimeout(() => {
+            container.style.display = "none";
+          }, 200);
         }
       });
 

package/src/iframe/base.ts

@@ -15,6 +15,7 @@ export class IFrame<CallSender extends {}> implements Modal {
   private container?: HTMLDivElement;
   private onClose?: () => void;
   private child?: AsyncMethodReturns<CallSender>;
+  private closeTimeout?: NodeJS.Timeout;
 
   constructor({
     id,
@@ -64,12 +65,11 @@ export class IFrame<CallSender extends {}> implements Modal {
     container.style.left = "0";
     container.style.zIndex = "10000";
     container.style.backgroundColor = "rgba(0,0,0,0.6)";
-    container.style.display = "flex";
+    container.style.display = "none"; // Use display: none to completely hide from password managers
     container.style.alignItems = "center";
     container.style.justifyContent = "center";
-    container.style.visibility = "hidden";
-    container.style.opacity = "0";
     container.style.transition = "opacity 0.2s ease";
+    container.style.opacity = "0";
     container.style.pointerEvents = "auto";
     container.appendChild(iframe);
 
@@ -134,10 +134,22 @@ export class IFrame<CallSender extends {}> implements Modal {
   open() {
     if (!this.container || typeof document === "undefined" || !document.body)
       return;
+
+    // Clear any pending close timeout to prevent race condition
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+      this.closeTimeout = undefined;
+    }
+
     document.body.style.overflow = "hidden";
 
-    this.container.style.visibility = "visible";
-    this.container.style.opacity = "1";
+    this.container.style.display = "flex";
+    // Use requestAnimationFrame to ensure display change is processed before opacity change
+    requestAnimationFrame(() => {
+      if (this.container) {
+        this.container.style.opacity = "1";
+      }
+    });
   }
 
   close() {
@@ -147,8 +159,16 @@ export class IFrame<CallSender extends {}> implements Modal {
 
     document.body.style.overflow = "auto";
 
-    this.container.style.visibility = "hidden";
+    // Start fade-out transition
     this.container.style.opacity = "0";
+
+    // Set display: none after transition completes (200ms)
+    this.closeTimeout = setTimeout(() => {
+      if (this.container) {
+        this.container.style.display = "none";
+      }
+      this.closeTimeout = undefined;
+    }, 200);
   }
 
   sendBackward() {
@@ -179,6 +199,6 @@ export class IFrame<CallSender extends {}> implements Modal {
   }
 
   isOpen() {
-    return this.iframe?.style.display !== "none";
+    return this.container?.style.display !== "none";
   }
 }