fix(qr-scanner): robustly handle array/object detection results and guarantee dialog dismissal

- Update QRScannerDialog.vue to handle both array and object detection results in onDetect fallback logic (supports vue-qrcode-reader returning arrays).
- Ensure dialog closes and scan is processed for all detection result shapes.
- Use arrow function for close() to guarantee correct binding with vue-facing-decorator.
- Add enhanced logging for all dialog lifecycle and close/cleanup events.
- In WebDialogQRScanner, use direct mount result (not $refs) for dialogComponent to ensure correct instance.
- Add sessionId and improved logging for dialog open/close/cleanup lifecycle.

src/services/QRScanner/WebDialogQRScanner.ts

@@ -9,19 +9,21 @@ export class WebDialogQRScanner implements QRScannerService {
   private scanListener: ScanListener | null = null;
   private isScanning = false;
   private container: HTMLElement | null = null;
+  private sessionId: number | null = null;
+  private failsafeTimeout: any = null;
 
   constructor(private options?: QRScannerOptions) {}
 
   async checkPermissions(): Promise<boolean> {
     try {
+      console.log("[QRScanner] Checking camera permissions...");
       const permissions = await navigator.permissions.query({
         name: "camera" as PermissionName,
       });
+      console.log("[QRScanner] Permission state:", permissions.state);
       return permissions.state === "granted";
     } catch (error) {
-      const wrappedError =
-        error instanceof Error ? error : new Error(String(error));
-      logger.error("Error checking camera permissions:", wrappedError);
+      console.error("[QRScanner] Error checking camera permissions:", error);
       return false;
     }
   }
@@ -126,6 +128,8 @@ export class WebDialogQRScanner implements QRScannerService {
 
     try {
       this.isScanning = true;
+      this.sessionId = Date.now();
+      console.log(`[WebDialogQRScanner] Opening dialog, session: ${this.sessionId}`);
 
       // Create and mount dialog component
       this.container = document.createElement("div");
@@ -142,11 +146,24 @@ export class WebDialogQRScanner implements QRScannerService {
             this.scanListener.onError(error);
           }
         },
+        onClose: () => {
+          console.log(`[WebDialogQRScanner] onClose received from dialog, session: ${this.sessionId}`);
+          this.stopScan('dialog onClose');
+        },
         options: this.options,
+        sessionId: this.sessionId,
       });
 
-      this.dialogComponent = this.dialogInstance.mount(this.container).$refs
-        .dialog as InstanceType<typeof QRScannerDialog>;
+      this.dialogComponent = this.dialogInstance.mount(this.container) as InstanceType<typeof QRScannerDialog>;
+
+      // Failsafe: force cleanup after 60s if dialog is still open
+      this.failsafeTimeout = setTimeout(() => {
+        if (this.isScanning) {
+          console.warn(`[WebDialogQRScanner] Failsafe triggered, forcing cleanup for session: ${this.sessionId}`);
+          this.stopScan('failsafe timeout');
+        }
+      }, 60000);
+      console.log(`[WebDialogQRScanner] Failsafe timeout set for session: ${this.sessionId}`);
     } catch (error) {
       this.isScanning = false;
       const wrappedError =
@@ -160,17 +177,20 @@ export class WebDialogQRScanner implements QRScannerService {
     }
   }
 
-  async stopScan(): Promise<void> {
+  async stopScan(reason: string = 'manual') : Promise<void> {
     if (!this.isScanning) {
       return;
     }
 
     try {
+      console.log(`[WebDialogQRScanner] stopScan called, reason: ${reason}, session: ${this.sessionId}`);
       if (this.dialogComponent) {
         await this.dialogComponent.close();
+        console.log(`[WebDialogQRScanner] dialogComponent.close() called, session: ${this.sessionId}`);
       }
       if (this.dialogInstance) {
         this.dialogInstance.unmount();
+        console.log(`[WebDialogQRScanner] dialogInstance.unmount() called, session: ${this.sessionId}`);
       }
     } catch (error) {
       const wrappedError =
@@ -179,6 +199,11 @@ export class WebDialogQRScanner implements QRScannerService {
       throw wrappedError;
     } finally {
       this.isScanning = false;
+      if (this.failsafeTimeout) {
+        clearTimeout(this.failsafeTimeout);
+        this.failsafeTimeout = null;
+        console.log(`[WebDialogQRScanner] Failsafe timeout cleared, session: ${this.sessionId}`);
+      }
       this.cleanupContainer();
     }
   }
@@ -190,13 +215,16 @@ export class WebDialogQRScanner implements QRScannerService {
   private cleanupContainer(): void {
     if (this.container && this.container.parentNode) {
       this.container.parentNode.removeChild(this.container);
+      console.log(`[WebDialogQRScanner] Dialog container removed from DOM, session: ${this.sessionId}`);
+    } else {
+      console.log(`[WebDialogQRScanner] Dialog container NOT removed from DOM, session: ${this.sessionId}`);
     }
     this.container = null;
   }
 
   async cleanup(): Promise<void> {
     try {
-      await this.stopScan();
+      await this.stopScan('cleanup');
     } catch (error) {
       const wrappedError =
         error instanceof Error ? error : new Error(String(error));
@@ -207,6 +235,7 @@ export class WebDialogQRScanner implements QRScannerService {
       this.dialogInstance = null;
       this.scanListener = null;
       this.cleanupContainer();
+      this.sessionId = null;
     }
   }
 }