Canvas: Text input cursor jumping (#57133)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

public/app/features/canvas/elements/text.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useObservable } from 'react-use';
 import { of } from 'rxjs';
 
@@ -38,10 +38,14 @@ const TextEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
   let panelData: DataFrame[];
   panelData = context.instanceState?.scene?.data.series;
 
-  const onTextChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
+  const textRef = useRef<string>(config.text?.fixed ?? '');
-    const { value: textValue } = event.currentTarget;
+
-    saveText(textValue);
+  // Save text on TextEdit unmount
-  };
+  useEffect(() => {
+    return () => {
+      saveText(textRef.current);
+    };
+  });
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
@@ -53,6 +57,10 @@ const TextEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
     }
   };
 
+  const onKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    textRef.current = event.currentTarget.value;
+  };
+
   const saveText = useCallback(
     (textValue: string) => {
       let selectedElement: ElementState;
@@ -80,7 +88,7 @@ const TextEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
   const styles = useStyles2(getStyles(data));
   return (
     <div className={styles.inlineEditorContainer}>
-      {panelData && <Input value={config.text?.fixed ?? ''} onChange={onTextChange} onKeyDown={onKeyDown} autoFocus />}
+      {panelData && <Input defaultValue={config.text?.fixed ?? ''} onKeyDown={onKeyDown} onKeyUp={onKeyUp} autoFocus />}
     </div>
   );
 };