From 7f5914ff05074fdf9a5e8aacafa9703b9f4e6dfb Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Mon, 17 Oct 2022 17:36:18 -0500
Subject: [PATCH] Canvas: Text input cursor jumping (#57133)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
---
 public/app/features/canvas/elements/text.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/public/app/features/canvas/elements/text.tsx b/public/app/features/canvas/elements/text.tsx
index 408e89120b7..2af79e8cd5c 100644
--- a/public/app/features/canvas/elements/text.tsx
+++ b/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 { value: textValue } = event.currentTarget;
-    saveText(textValue);
-  };
+  const textRef = useRef<string>(config.text?.fixed ?? '');
+
+  // 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>
   );
 };