diff --git a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx index aa5c53aa1fa..8f0a383d80f 100644 --- a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx +++ b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx @@ -1,5 +1,5 @@ import debounce from 'debounce-promise'; -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useState, useEffect } from 'react'; import { UseFormSetValue, useForm } from 'react-hook-form'; import { selectors } from '@grafana/e2e-selectors'; @@ -30,7 +30,7 @@ export interface Props { export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) { const { changedSaveModel } = changeInfo; - const { register, handleSubmit, setValue, formState, getValues, watch } = useForm({ + const { register, handleSubmit, setValue, formState, getValues, watch, trigger } = useForm({ mode: 'onBlur', defaultValues: { title: changeInfo.isNew ? changedSaveModel.title! : `${changedSaveModel.title} Copy`, @@ -49,7 +49,11 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) { const { state, onSaveDashboard } = useSaveDashboard(false); const [contentSent, setContentSent] = useState<{ title?: string; folderUid?: string }>({}); - const [hasFolderChanged, setHasFolderChanged] = useState(false); + + // Validate title on form mount to catch invalid default values + useEffect(() => { + trigger('title'); + }, [trigger]); const onSave = async (overwrite: boolean) => { const data = getValues(); @@ -84,12 +88,11 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) { ); const saveButton = (overwrite: boolean) => { - const showSaveButton = !isValid && hasFolderChanged ? true : isValid; const isTitleValidating = !!validatingFields.title; return ( { setValue('folder', { uid, title }); - const folderUid = dashboard.state.meta.folderUid; - setHasFolderChanged(uid !== folderUid); const meta = await getProvisionedMeta(uid); dashboard.setState({ meta: { @@ -169,6 +170,8 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) { folderUid: uid, }, }); + // Re-validate title when folder changes to check for duplicates in new folder + trigger('title'); }} value={formValues.folder?.uid} />