fix: resets form data after submission
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { createElement, useState } from 'react'
|
import { createElement, useEffect, useState } from 'react'
|
||||||
import { RotateCcw, ChevronDown } from 'lucide-react'
|
import { RotateCcw, ChevronDown } from 'lucide-react'
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
@@ -42,14 +42,20 @@ interface NodeModalProps {
|
|||||||
|
|
||||||
const CHILD_TYPES: NodeType[] = ['vm', 'lxc']
|
const CHILD_TYPES: NodeType[] = ['vm', 'lxc']
|
||||||
|
|
||||||
// NodeModal is always mounted with a key that changes on open/edit, so useState
|
|
||||||
// initial value is enough — no need for a reset effect.
|
|
||||||
export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node', proxmoxNodes = [] }: NodeModalProps) {
|
export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node', proxmoxNodes = [] }: NodeModalProps) {
|
||||||
const [form, setForm] = useState<Partial<NodeData>>({ ...DEFAULT_DATA, ...initial })
|
const [form, setForm] = useState<Partial<NodeData>>({ ...DEFAULT_DATA, ...initial })
|
||||||
const [iconSearch, setIconSearch] = useState('')
|
const [iconSearch, setIconSearch] = useState('')
|
||||||
const [iconPickerOpen, setIconPickerOpen] = useState(false)
|
const [iconPickerOpen, setIconPickerOpen] = useState(false)
|
||||||
const [labelError, setLabelError] = useState(false)
|
const [labelError, setLabelError] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return
|
||||||
|
setForm({ ...DEFAULT_DATA, ...initial })
|
||||||
|
setIconSearch('')
|
||||||
|
setIconPickerOpen(false)
|
||||||
|
setLabelError(false)
|
||||||
|
}, [open, initial])
|
||||||
|
|
||||||
const set = (key: keyof NodeData, value: unknown) =>
|
const set = (key: keyof NodeData, value: unknown) =>
|
||||||
setForm((f) => ({ ...f, [key]: value }))
|
setForm((f) => ({ ...f, [key]: value }))
|
||||||
|
|
||||||
|
|||||||
@@ -130,6 +130,21 @@ describe('NodeModal', () => {
|
|||||||
expect(data.notes).toBe('rack A')
|
expect(data.notes).toBe('rack A')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('resets form values when reopened in Add mode', () => {
|
||||||
|
const onClose = vi.fn()
|
||||||
|
const onSubmit = vi.fn()
|
||||||
|
|
||||||
|
const { rerender } = render(<NodeModal open onClose={onClose} onSubmit={onSubmit} />)
|
||||||
|
fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'Temp Node' } })
|
||||||
|
fireEvent.change(screen.getByPlaceholderText('server.lan'), { target: { value: 'temp.local' } })
|
||||||
|
|
||||||
|
rerender(<NodeModal open={false} onClose={onClose} onSubmit={onSubmit} />)
|
||||||
|
rerender(<NodeModal open onClose={onClose} onSubmit={onSubmit} />)
|
||||||
|
|
||||||
|
expect((screen.getByPlaceholderText('My Server') as HTMLInputElement).value).toBe('')
|
||||||
|
expect((screen.getByPlaceholderText('server.lan') as HTMLInputElement).value).toBe('')
|
||||||
|
})
|
||||||
|
|
||||||
it('submits check_target', () => {
|
it('submits check_target', () => {
|
||||||
const { onSubmit } = renderModal({ initial: BASE })
|
const { onSubmit } = renderModal({ initial: BASE })
|
||||||
fireEvent.change(screen.getByPlaceholderText('http://...'), { target: { value: 'http://192.168.1.10:8080' } })
|
fireEvent.change(screen.getByPlaceholderText('http://...'), { target: { value: 'http://192.168.1.10:8080' } })
|
||||||
|
|||||||
Reference in New Issue
Block a user