[Interactive Graph Editor] Stop cursor jumps in number input fields

.changeset/neat-kiwis-relax.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor] Stop cursor jumps in number input fields

packages/perseus-editor/src/components/scrollless-number-text-field.tsx

@@ -6,8 +6,14 @@ import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 /**
  * This is a custom text field of type="number" for use in Perseus Editors.
  *
- * This makes it so that the text field's input number updates on scroll
- * without scrolling the page.
+ * This component makes it so that
+ * 1. the text field's input number updates on scroll without
+ *    scrolling the page.
+ * 2. the input is controlled as long as it does not have focus.
+ *    While it is focused, it becomes editable and emits onChange
+ *    events. This is useful to make sure that input behavior
+ *    remains predictable, rather than possibly having the cursor
+ *    jump around uenxpectedly.
  *
  * NOTE 1: Native HTML number inputs do not update the number value on scroll,
  * they only scroll the page. Inputs in React do NOT work this way (explanation
@@ -16,10 +22,14 @@ import type {PropsFor} from "@khanacademy/wonder-blocks-core";
  * the page to scroll. The behavior in this component is an improvement on
  * the React behavior, but it's the opposite of the native HTML behavior.
  *
- * NOTE 2: Firefox seems to have a custom override for this. Even with this
- * stopPropogation, Firefox matches the native HTML behavior.
+ * NOTE 2: Firefox seems to have a custom override for input scroll. Even
+ * with this stopPropogation, Firefox matches the native HTML behavior.
  */
 const ScrolllessNumberTextField = (props: PropsFor<typeof TextField>) => {
+    const {value, onChange, ...restOfProps} = props;
+    const [focused, setFocused] = React.useState(false);
+    const [wipValue, setWipValue] = React.useState("");
+
     const inputRef = React.useRef<HTMLInputElement>(null);
 
     React.useEffect(() => {
@@ -39,7 +49,33 @@ const ScrolllessNumberTextField = (props: PropsFor<typeof TextField>) => {
         };
     }, [inputRef]);
 
-    return <TextField type="number" {...props} ref={inputRef} />;
+    return (
+        <TextField
+            {...restOfProps}
+            type="number"
+            value={focused ? wipValue : value}
+            onChange={(newValue) => {
+                setWipValue(newValue);
+                onChange(newValue);
+            }}
+            onFocus={(e) => {
+                setWipValue(value);
+                setFocused(true);
+
+                if (props.onFocus) {
+                    props.onFocus(e);
+                }
+            }}
+            onBlur={(e) => {
+                setFocused(false);
+
+                if (props.onBlur) {
+                    props.onBlur(e);
+                }
+            }}
+            ref={inputRef}
+        />
+    );
 };
 
 export default ScrolllessNumberTextField;

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx

@@ -98,6 +98,7 @@ const LockedPointSettings = (props: Props) => {
         onRemove,
         // defining point props
         showPoint,
+        error,
         expanded,
         onTogglePoint,
         onToggle,
@@ -215,6 +216,7 @@ const LockedPointSettings = (props: Props) => {
                 coord={coord}
                 style={styles.spaceUnder}
                 onChange={handleCoordChange}
+                error={!!error}
             />
 
             {/* Toggle switch */}