fix: Dashboard editable title weird behavior when adding spaces (#29667)

superset-frontend/src/components/DynamicEditableTitle/index.tsx

@@ -20,6 +20,7 @@
 import {
   ChangeEvent,
   KeyboardEvent,
+  memo,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -72,16 +73,18 @@ const titleStyles = (theme: SupersetTheme) => css`
     position: absolute;
     left: -9999px;
     display: inline-block;
+    white-space: pre;
   }
 `;
 
-export const DynamicEditableTitle = ({
+export const DynamicEditableTitle = memo(
+  ({
     title,
     placeholder,
     onSave,
     canEdit,
     label,
-}: DynamicEditableTitleProps) => {
+  }: DynamicEditableTitleProps) => {
     const [isEditing, setIsEditing] = useState(false);
     const [currentTitle, setCurrentTitle] = useState(title || '');
     const contentRef = useRef<HTMLInputElement>(null);
@@ -174,7 +177,9 @@ export const DynamicEditableTitle = ({
       <div css={titleStyles} ref={containerRef}>
         <Tooltip
           id="title-tooltip"
-        title={showTooltip && currentTitle && !isEditing ? currentTitle : null}
+          title={
+            showTooltip && currentTitle && !isEditing ? currentTitle : null
+          }
         >
           {canEdit ? (
             <input
@@ -209,7 +214,13 @@ export const DynamicEditableTitle = ({
             </span>
           )}
         </Tooltip>
-      <span ref={sizerRef} className="input-sizer" aria-hidden tabIndex={-1} />
+        <span
+          ref={sizerRef}
+          className="input-sizer"
+          aria-hidden
+          tabIndex={-1}
+        />
       </div>
     );
-};
+  },
+);