[Dashboard] Do not update dashboard settings on every keypress in Heading (#38361)

frontend/src/metabase/visualizations/visualizations/Heading/Heading.tsx

 import type { MouseEvent } from "react";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { t } from "ttag";
 
@@ -44,11 +44,15 @@ export function Heading({
     useToggle(justAdded);
   const isPreviewing = !isFocused;
 
-  const handleTextChange = (text: string) =>
-    onUpdateVisualizationSettings({ text });
+  const [textValue, setTextValue] = useState(settings.text);
   const preventDragging = (e: MouseEvent<HTMLInputElement>) =>
     e.stopPropagation();
 
+  // handles a case when settings are updated externally
+  useEffect(() => {
+    setTextValue(settings.text);
+  }, [settings.text]);
+
   const content = useMemo(
     () =>
       fillParametersInText({
@@ -84,11 +88,17 @@ export function Heading({
             name="heading"
             data-testid="editing-dashboard-heading-input"
             placeholder={placeholder}
-            value={settings.text}
+            value={textValue}
             autoFocus={justAdded || isFocused}
-            onChange={e => handleTextChange(e.target.value)}
+            onChange={e => setTextValue(e.target.value)}
             onMouseDown={preventDragging}
-            onBlur={toggleFocusOff}
+            onBlur={() => {
+              toggleFocusOff();
+
+              if (settings.text !== textValue) {
+                onUpdateVisualizationSettings({ text: textValue });
+              }
+            }}
           />
         )}
       </InputContainer>

frontend/src/metabase/visualizations/visualizations/Heading/Heading.unit.spec.tsx

@@ -206,6 +206,27 @@ describe("Text", () => {
           screen.getByDisplayValue("Variable: {{variable}}"),
         ).toBeInTheDocument();
       });
+
+      it("should call onUpdateVisualizationSettings on blur", () => {
+        const mockOnUpdateVisualizationSettings = jest.fn();
+        const options = {
+          settings: getSettingsWithText("text"),
+          isEditing: true,
+          onUpdateVisualizationSettings: mockOnUpdateVisualizationSettings,
+        };
+        setup(options);
+
+        userEvent.click(
+          screen.getByTestId("editing-dashboard-heading-preview"),
+        );
+        userEvent.type(screen.getByRole("textbox"), "foo");
+        userEvent.tab();
+
+        expect(mockOnUpdateVisualizationSettings).toHaveBeenCalledTimes(1);
+        expect(mockOnUpdateVisualizationSettings).toHaveBeenCalledWith({
+          text: "textfoo",
+        });
+      });
     });
   });
 });

frontend/src/metabase/visualizations/visualizations/Text/Text.unit.spec.tsx

@@ -167,6 +167,7 @@ describe("Text", () => {
         userEvent.type(screen.getByRole("textbox"), "foo");
         userEvent.tab();
 
+        expect(mockOnUpdateVisualizationSettings).toHaveBeenCalledTimes(1);
         expect(mockOnUpdateVisualizationSettings).toHaveBeenCalledWith({
           text: "textfoo",
         });