[Start Coords] Fix the radius input in circle graph start coords UI

.changeset/light-islands-lick.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+[Start Coords] Fix the radius input in circle graph start coords UI

packages/perseus-editor/src/components/__tests__/start-coords-settings.test.tsx

@@ -390,6 +390,79 @@ describe("StartCoordSettings", () => {
                 expect(onChangeMock).toHaveBeenLastCalledWith(expectedCoords);
             },
         );
+
+        test("does not call onChange when the radius is not a number", async () => {
+            // Arrange
+            const onChangeMock = jest.fn();
+
+            render(
+                <StartCoordsSettings
+                    {...defaultProps}
+                    type="circle"
+                    onChange={onChangeMock}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            // Act
+            const input = screen.getByRole("spinbutton", {
+                name: "Radius:",
+            });
+            await userEvent.type(input, "-");
+
+            // Assert
+            expect(onChangeMock).not.toHaveBeenCalled();
+        });
+
+        test("does not call onChange when the radius is empty", async () => {
+            // Arrange
+            const onChangeMock = jest.fn();
+
+            render(
+                <StartCoordsSettings
+                    {...defaultProps}
+                    type="circle"
+                    onChange={onChangeMock}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            // Act
+            const input = screen.getByRole("spinbutton", {
+                name: "Radius:",
+            });
+            await userEvent.clear(input);
+
+            // Assert
+            expect(onChangeMock).not.toHaveBeenCalled();
+        });
+
+        test("allows the user to type a decimal radius", async () => {
+            // Arrange
+            const onChangeMock = jest.fn();
+
+            render(
+                <StartCoordsSettings
+                    {...defaultProps}
+                    type="circle"
+                    onChange={onChangeMock}
+                />,
+                {wrapper: RenderStateRoot},
+            );
+
+            // Act
+            const input = screen.getByRole("spinbutton", {
+                name: "Radius:",
+            });
+            await userEvent.clear(input);
+            await userEvent.type(input, "0.5");
+
+            // Assert
+            expect(onChangeMock).toHaveBeenCalledWith({
+                center: [0, 0],
+                radius: 0.5,
+            });
+        });
     });
 
     describe("sinusoid graph", () => {

packages/perseus-editor/src/components/start-coords-circle.tsx

@@ -21,6 +21,33 @@ type Props = {
 const StartCoordsCircle = (props: Props) => {
     const {startCoords, onChange} = props;
 
+    const [radiusState, setRadiusState] = React.useState(
+        startCoords.radius.toString(),
+    );
+
+    // Update the local state when the props change. (Specifically, when
+    // the radius is reset from the "Use default start coordinates" button.)
+    React.useEffect(() => {
+        setRadiusState(startCoords.radius.toString());
+    }, [startCoords.radius]);
+
+    function handleRadiuschange(newValue: string) {
+        // Update the local state to update the input field.
+        setRadiusState(newValue);
+
+        // Assume the user is in the middle of typing. Don't update
+        // the props until they've finished typing a valid number.
+        if (isNaN(+newValue) || newValue === "" || +newValue === 0) {
+            return;
+        }
+
+        // Update the props (update the graph).
+        onChange({
+            center: startCoords.center,
+            radius: parseFloat(newValue),
+        });
+    }
+
     return (
         <View style={styles.tile}>
             {/* Center */}
@@ -38,20 +65,15 @@ const StartCoordsCircle = (props: Props) => {
             <Strut size={spacing.small_12} />
 
             {/* Radius */}
-            <View style={styles.row}>
-                <LabelLarge>Radius:</LabelLarge>
+            <LabelLarge tag="label" style={styles.row}>
+                Radius:
                 <Strut size={spacing.small_12} />
                 <ScrolllessNumberTextField
-                    value={startCoords.radius.toString()}
-                    onChange={(value) => {
-                        onChange({
-                            center: startCoords.center,
-                            radius: parseFloat(value),
-                        });
-                    }}
+                    value={radiusState}
+                    onChange={handleRadiuschange}
                     style={styles.textField}
                 />
-            </View>
+            </LabelLarge>
         </View>
     );
 };
@@ -64,6 +86,7 @@ const styles = StyleSheet.create({
         borderRadius: spacing.xSmall_8,
     },
     row: {
+        display: "flex",
         flexDirection: "row",
         alignItems: "center",
     },