From 79093fdcfb44c84ac50cadb3871c04f22300e89f Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Wed, 3 Jun 2026 00:59:28 +0200
Subject: [PATCH] fix(ui): close pending/hidden devices modal via the X on
 Firefox

The close X used a raw <button onClick={onClose}>, bypassing Base UI's
dismissal. Outside-click worked (it goes through onOpenChange) but the
synthetic click on the X was dropped on Firefox/Windows. Route the X
through Base UI's DialogClose, the same path as outside-click and the
library's default close button. Add a regression test.

ha-relevant: maybe
---
 .../components/modals/PendingDevicesModal.tsx   | 17 ++++++++++++++---
 .../__tests__/PendingDevicesModal.test.tsx      |  8 ++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/modals/PendingDevicesModal.tsx b/frontend/src/components/modals/PendingDevicesModal.tsx
index 1f770ed..39aa1fb 100644
--- a/frontend/src/components/modals/PendingDevicesModal.tsx
+++ b/frontend/src/components/modals/PendingDevicesModal.tsx
@@ -3,7 +3,7 @@ import {
   Globe, Router, Server, Layers, Box, Container, HardDrive, Cpu, Wifi, Circle, Network,
   Search, RefreshCw, X, CheckCircle2, EyeOff, Trash2, Loader2,
 } from 'lucide-react'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { scanApi } from '@/api/client'
 import { useCanvasStore } from '@/stores/canvasStore'
 import { toast } from 'sonner'
@@ -408,9 +408,20 @@ export function PendingDevicesModal({ open, onClose, highlightId, initialStatus
                     <Trash2 size={14} />
                   </button>
                 )}
-                <button onClick={onClose} className="text-muted-foreground hover:text-foreground p-1.5 rounded transition-colors" title="Close">
+                {/* Route the close X through Base UI's DialogClose (same path as
+                    outside-click) instead of a raw onClick — the latter's synthetic
+                    click was being dropped on Firefox/Windows. */}
+                <DialogClose
+                  render={
+                    <button
+                      className="text-muted-foreground hover:text-foreground p-1.5 rounded transition-colors"
+                      title="Close"
+                      aria-label="Close"
+                    />
+                  }
+                >
                   <X size={14} />
-                </button>
+                </DialogClose>
               </div>
             </div>
           </DialogHeader>
diff --git a/frontend/src/components/modals/__tests__/PendingDevicesModal.test.tsx b/frontend/src/components/modals/__tests__/PendingDevicesModal.test.tsx
index 4cbcf97..8e99fd4 100644
--- a/frontend/src/components/modals/__tests__/PendingDevicesModal.test.tsx
+++ b/frontend/src/components/modals/__tests__/PendingDevicesModal.test.tsx
@@ -99,6 +99,14 @@ describe('PendingDevicesModal', () => {
     expect(screen.getByText('living-room-bulb')).toBeInTheDocument()
   })
 
+  it('closes via the X button (routes through DialogClose, not a raw onClick)', async () => {
+    const onClose = vi.fn()
+    render(<PendingDevicesModal open onClose={onClose} />)
+    await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument())
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
   it('shows source chip ZIGBEE for zigbee device', async () => {
     render(<PendingDevicesModal {...baseProps} />)
     await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument())