diff --git a/frontend/src/components/settings/OpenCodeModelDialog.tsx b/frontend/src/components/settings/OpenCodeModelDialog.tsx index b19bd341..41489409 100644 --- a/frontend/src/components/settings/OpenCodeModelDialog.tsx +++ b/frontend/src/components/settings/OpenCodeModelDialog.tsx @@ -1,7 +1,7 @@ import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { z } from 'zod' -import { useCallback, useEffect, useMemo } from 'react' +import { useCallback, useEffect, useMemo, useRef } from 'react' import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog' import { Input } from '@/components/ui/input' @@ -248,13 +248,23 @@ export function OpenCodeModelDialog({ const { isValid } = form.formState const createNewProvider = form.watch('createNewProvider') const newProviderType = form.watch('newProviderType') + const resetKeyRef = useRef(null) + const resetKey = editingModel + ? `edit-${editingModel.providerId}-${editingModel.modelId}` + : `create-${selectedProviderId || availableProviders[0] || ''}` useEffect(() => { - if (open) { + if (!open) { + resetKeyRef.current = null + return + } + + if (resetKeyRef.current !== resetKey) { + resetKeyRef.current = resetKey form.reset(getDefaultValues()) void form.trigger() } - }, [open, form, getDefaultValues]) + }, [open, resetKey, form, getDefaultValues]) const handleSubmit = (values: ModelFormValues) => { const extra = parseOptionalJsonField(values.extraJson) diff --git a/frontend/src/components/settings/OpenCodeModelsEditor.test.tsx b/frontend/src/components/settings/OpenCodeModelsEditor.test.tsx index 4a39c101..e47d1fa8 100644 --- a/frontend/src/components/settings/OpenCodeModelsEditor.test.tsx +++ b/frontend/src/components/settings/OpenCodeModelsEditor.test.tsx @@ -172,6 +172,29 @@ describe('OpenCodeModelDialog', () => { expect(screen.getByText(/must use only letters, numbers/i)).toBeInTheDocument() }) }) + + it('should preserve create form values when provider props refresh', async () => { + const { OpenCodeModelDialog } = await import('./OpenCodeModelDialog') + const props = { + ...defaultProps, + availableProviders: ['openai'], + existingProviders: { openai: { name: 'OpenAI' } }, + } + const { rerender } = render() + + const modelIdInput = document.querySelector('input[name="modelId"]') as HTMLInputElement + fireEvent.change(modelIdInput, { target: { value: 'gpt-5' } }) + + rerender( + + ) + + expect(modelIdInput).toHaveValue('gpt-5') + }) }) describe('form submission', () => {