fix(SearchPalette): return null while closed

The Overlay refactor dropped the early return, so the fixed-inset backdrop
stayed mounted permanently: the palette covered the page and swallowed
every click. Restore the guard and cover it with tests.
This commit is contained in:
developer committed 2026-09-15 18:28:38 +00:00
1 parent f6e81afe5e
commit 72ff61f94d
2 files changed
+44

No files matched your search

+39
View File
@@ -3,6 +3,7 @@ import { useState } from 'react'
import { describe, expect, it } from 'vitest'
import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../src/components/ui/Dialog'
import { Sheet, SheetClose, SheetContent, SheetTitle } from '../src/components/ui/Sheet'
import { SearchPalette } from '../src/components/SearchPalette'
describe('Dialog (Overlay primitive)', () => {
it('renders a modal dialog with the panel focused when open', () => {
@@ -168,3 +169,41 @@ describe('Sheet (Overlay skin)', () => {
expect(last).toHaveFocus()
})
})
describe('SearchPalette (Overlay behavior)', () => {
it('renders nothing while closed and no backdrop is left over the page', () => {
const { rerender } = render(
<SearchPalette isOpen={false} onClose={() => {}} onSelect={() => {}} />,
)
expect(screen.queryByRole('dialog')).toBeNull()
expect(document.querySelector('.search-palette-backdrop')).toBeNull()
expect(document.body.style.overflow).toBe('')
rerender(<SearchPalette isOpen onClose={() => {}} onSelect={() => {}} />)
expect(screen.getByRole('dialog')).toHaveClass('search-palette-modal')
})
it('closes on Escape / backdrop click and unlocks body scroll', () => {
function Controlled() {
const [open, setOpen] = useState(true)
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
<SearchPalette isOpen={open} onClose={() => setOpen(false)} onSelect={() => {}} />
</>
)
}
const { container } = render(<Controlled />)
expect(document.body.style.overflow).toBe('hidden')
fireEvent.keyDown(window, { key: 'Escape' })
expect(screen.queryByRole('dialog')).toBeNull()
expect(document.body.style.overflow).toBe('')
fireEvent.click(screen.getByRole('button', { name: 'Open' }))
expect(screen.getByRole('dialog')).toBeInTheDocument()
fireEvent.click(container.querySelector('.search-palette-backdrop')!)
expect(screen.queryByRole('dialog')).toBeNull()
expect(document.body.style.overflow).toBe('')
})
})