From c9ac6dd3e7464278800d2a853b6d19ba55a7854a Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Tue, 5 Mar 2024 10:46:03 +0100
Subject: [PATCH] Dashboard scenes: debounce name validation when saving
 dashboards (#83580)

* Dashboard scenes: debounce name validation when saving dashboards

* add newline
---
 .../features/dashboard-scene/saving/SaveDashboardAsForm.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
index 14f7e3e3bbb..5f201c9f6a1 100644
--- a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
@@ -1,3 +1,4 @@
+import debounce from 'debounce-promise';
 import React from 'react';
 import { UseFormSetValue, useForm } from 'react-hook-form';
 
@@ -29,7 +30,7 @@ export interface Props {
 export function SaveDashboardAsForm({ dashboard, drawer, changeInfo }: Props) {
   const { changedSaveModel } = changeInfo;
 
-  const { register, handleSubmit, setValue, formState, getValues, watch } = useForm<SaveDashboardAsFormDTO>({
+  const { register, handleSubmit, setValue, formState, getValues, watch, trigger } = useForm<SaveDashboardAsFormDTO>({
     mode: 'onBlur',
     defaultValues: {
       title: changeInfo.isNew ? changedSaveModel.title! : `${changedSaveModel.title} Copy`,
@@ -98,6 +99,9 @@ export function SaveDashboardAsForm({ dashboard, drawer, changeInfo }: Props) {
         <Input
           {...register('title', { required: 'Required', validate: validateDashboardName })}
           aria-label="Save dashboard title field"
+          onChange={debounce(async () => {
+            trigger('title');
+          }, 400)}
           autoFocus
         />
       </Field>